Vuex 突变引发错误 - 不要在突变处理程序之外改变 vuex 存储状态答案

【问题标题】：Vuex mutation throws an error - do not mutate vuex store state outside mutation handlersVuex 突变引发错误 - 不要在突变处理程序之外改变 vuex 存储状态
【发布时间】：2021-11-30 13:58:34
【问题描述】：

我有一个 Vuex 存储对象，它有一个突变。

SET_FILTERS_CATEGORIES(state, payload) {
    state.filters.categories = payload;
},

SET_FILTERS_CATEGORIES(state, payload) {
    // state.filters.categories = payload;  // This "works"
},

这个突变给我一个错误：

不要在突变处理程序之外改变 vuex 存储状态

如果我评论了这一行，它“有效”。我不明白有什么问题。它在突变部分内。

【问题讨论】：

你能分享你调用突变的 Vue 组件吗？
它有 1800 行。这是引发错误的代码。
@Čamo 你怎么称呼突变？这就是我们正在寻找的代码。
从存储操作中调用突变。
请展示一些相关的具体代码。仅此，我们无法为您提供帮助。另外，您是否在任何地方查找过这个问题？这可能是一个很好的起点：stackoverflow.com/q/46044276/8816585

标签： vue.js nuxt.js vuex mutation

【解决方案1】：

您必须仅在 action 方法中调用您的 mutation。

代码示例

const mutations = {
  SET_FILTERS_CATEGORIES(state, payload) {
      state.filters.categories = payload;
  },
}

const actions = {
  getFiltersCategories ({commit}, payload){
    commit('SET_FILTERS_CATEGORIES', payload)
  }
}

【讨论】：

是的，我是这样做的。但是它会引发错误。
它会抛出同样的错误吗？让我看看你在代码中调用 SET_FILTERS_CATEGORIES 的位置
我在操作部分调用它。它有一个动作。
我能看到你的代码吗？