从外部jsts文件调用nuxtaxios模块。

Question

我是vue的新手，想用nuxtjs构建我的第一个vue应用。 我现在的问题是关于架构和文件夹结构。

在我的其他非vue应用中，我总是有一个 "services "目录，在那里我保存了所有的http请求代码。

例如，在我的services文件夹下，我会有一个Auth.ts文件，其中包含了向我的API发布登录凭证的代码。这个文件类返回一个承诺，我可以从我的商店中访问。

我试图使用nuxtjs在vue中实现这个功能，但我意识到我无法从我的.vue文件之外的任何地方访问axios模块。

这是我现在的代码的一个例子。

<template>
  ...
</template>

<script lang="ts">
import Vue from 'vue'
import ActionBar from '../../components/ActionBar.vue'

export default Vue.extend({
  components: { ActionBar },
  data() {
    return {
      example: ''
  },
  methods: {},
  mounted() {
    this.$axios.$get('/examples').then((res) => {
      this.examples = res.data;
    })
  }
})
</script>

<style>
...
</style>

我想把 axios 调用移到我的 services 文件夹中自己的文件中。 我该怎么做呢？

Answer 1

你可以做的是在 "服务 "里面创建一个文件。./store 文件夹，让我们想象一下。./store/products.js这将创建一个产品商店，里面有简单的getters、mutations和action。

export const state = () => ({
    products: [],
    fetchingProducts: false,
})

export const getters = {
    getAllProducts(state) {
        return state.products
    },
    hasProducts(state) {
        return state.products.length > 0
    },
    isFetchingProducts(state) {
        return state.fetchingProducts
    },
}

export const mutations = {
    setInitialData(state, products) {
        state.products = products
    },
    setLoadingProducts(state, isLoading) {
        state.fetchingProducts = isLoading
    },
}


export const actions = {
    async fetchProducts(context, payload) {
        context.commit('setLoadingProducts', true)

        const url = `/api/example/${payload.something}`
        const res = await this.$axios.get(url)
        context.commit('setInitialData', res.data)
        context.commit('setLoadingProducts', false)
    },
}

然后在你的 .vue 文件，你现在可以将商店作为。

<template>
  <div>
    <div v-if="isFetchingProducts"> loading... </div>
    <div v-else-if="!hasProducts">no products found</div>
    <div v-else>
      <ul>
        <li v-for="product in allProducts" :key="product.id">
          {{ product.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    data () {
      return {
        products: []
      }
    },
    methods: {
      ...mapGetters({
        isFetchingProducts: 'products/isFetchingProducts',
        allProducts: 'products/getAllProducts',
        hasProducts: 'products/hasProducts',
      })
    },
    mounted() {
      this.$store.dispatch('products/fetchProducts', {})
    },
  }
</script>

<style>
...
</style>

记住这一点。

• 要调用一个存储动作，你应该使用 $store.dispatch()
• 调用突变，您应该使用 $store.commit()
• 来调用一个getter，你应该使用 $store.getter()

您也可以使用Vuex助手的以下功能 mapGetters, mapActions 甚至 mapMutations

---

您可能还知道，您可以利用 插件 在Nuxt中，该条已 示范码 以及，所以你可以跟进真的很快