Question

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

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

在我的服务文件夹下的示例，我将有一个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调用移到我的服务文件夹中自己的文件中。我该怎么做？

Answer 1

您可以做的是在./store文件夹中创建一个文件，假设./store/products.js，该文件将在内部创建产品存储，简单的getter，变异和操作：

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()
要呼叫吸气剂，您应该使用$store.getter()

您还可以使用Vuex帮助器mapGetters，mapActions甚至mapMutations

您可能还知道，您可以在Nuxt中利用the Plugins，该文章也有demo code，因此您可以很快进行跟进

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

1 个答案: