0

nuxt.js在使用了很长一段时间后我已经开始使用vue，但即使在遵循关于vuex和axios的 nuxt.js 文档之后，我也不明白为什么this.$axios.$get(...)不起作用。这就是我所拥有的

/* ~/store/products.js */

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

export const mutations = {
  SET_PRODUCTS(state, products) {
    state.products = products
  }
}

export const actions = {
  getProducts({ commit }) {
    this.$axios.$get("merchandise.json").then(res => {
      commit("SET_PRODUCTS", res)
    })
  }
}

export const getters = {}

/* ~/pages/index.vue */
...
<script>
import { mapGetters, mapMutations, mapActions } from "vuex"
import Card from "@/components/Card.vue"

export default {
  components: {
    Card
  },
  methods: {
    ...mapActions([ "getProducts" ])
  },
  computed: {
    products() {
      return this.$store.state.products.products
    }
  }
}
</script>

这就是我的配置的样子

/* nuxt.config.js */

...
  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/dotenv",
    ...
  ],

  axios: {
    baseURL: process.env.BASE_URL
  },
...

/* .env */

BASE_URL = http://localhost:3000/data/

如果我this.$axios.$get("merchandise.json")在其他文件中这样做，~/pages/index.vue它可以工作但在商店中不起作用。可能是什么问题呢？

4

0 回答 0