vue.js - 从外部 js/ts 文件调用 nuxt/axios 模块

Question

我是 vue 的新手，正在尝试使用 nuxtjs 构建我的第一个 vue 应用程序。我现在的问题与体系结构和文件夹结构有关。

在我的其他非 Vue 应用程序中，我总是有一个“服务”目录，我在其中保存发出 http 请求的所有代码。

示例在我的服务文件夹下，我将有一个 auth.ts 文件，其中包含将登录凭据发布到我的 API 的代码。这个文件/类返回一个我从我的商店中访问的 promise 。

我正在尝试使用 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 调用移动到我的服务文件夹中它们自己的文件中。我该怎么做？

Answer 1

您可以做的是在 ./store 文件夹中创建一个文件，让我们想象一下，./store/products.js 将创建一个产品商店，在内部，简单的 setter/getter 、突变和 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

---

您可能还知道可以利用 the Plugins在 Nuxt 中，那篇文章有 demo code这样您就可以非常快速地跟进