Nuxt store getter not working, ID given to payload is not an Integer + Error: [vuex] do not mutate vuex store state outside mutation handlers

Question

我正在尝试制作产品详情页。详细信息页面名为 _id。打开后，id 将替换为产品 id。打开页面时，状态设置为从 api.

中获取的数据

之后，我尝试使用一个计算的属性，它引用一个名为 getProduct() 的 getter，有效负载中有一个 id (this.$route.params.id)。

这是我的 _id.vue 的样子：

methods: {
  ...mapActions("products", ["fetchProducts",]),
  ...mapGetters("products", ["getProduct",]),
},
async mounted() {
  this.fetchProducts()
},
computed: {
  product() {
    return this.getProduct(this.$route.params.id)
  }
}

这是我名为 products.js 的商店文件的样子：

import axios from "axios"

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

export const mutations = {
  setProducts(state, data) {
    state.producten = data
  }
}

export const getters = {
  getProduct(state, id) {
    console.log(id)
    return state.producten.filter(product => product.id = id)
  }
}

export const actions = {
  async fetchProducts({ commit }) {
    await axios.get('/api/products')
      .then(res => {
        var data = res.data
        commit('setProducts', data)
      })
      .catch(err => console.log(err));
  }
}

有效的是创建状态，但是当我尝试使用 getter 时出现了问题。如您所见，我 console.log() 给它的 id。其中记录以下内容：

我也收到错误：client.js?06a0:103 错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态。

据我所知我没有做哪些事情？

**注意：**这些错误的记录与我的状态数组的长度一样多。

Answer 1

来自Vuex documentation：

Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.

和computed一样，getters不支持带参数。

但是有一种方法可以对 getter 进行“方法式访问”：https://vuex.vuejs.org/guide/getters.html#property-style-access

You can also pass arguments to getters by returning a function. This is particularly useful when you want to query an array in the store:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Note that getters accessed via methods will run each time you call them, and the result is not cached.

Nuxt store getter not working, ID given to payload is not an Integer + Error: [vuex] do not mutate vuex store state outside mutation handlers

Nuxt store getter not working, ID given to payload is not an Integer + Error: [vuex] do not mutate vuex store state outside mutation handlers

getter

store

vue.js

vuex

nuxt.js