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

Posted 2023-03-16

【中文标题】Vuex 突变引发错误 - 不要在突变处理程序之外改变 vuex 存储状态

【英文标题】：Vuex mutation throws an error - do not mutate vuex store state outside mutation handlers

【发布时间】：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 你怎么称呼突变？这就是我们正在寻找的代码。

从存储操作中调用突变。

请展示一些相关的具体代码。仅此，我们无法为您提供帮助。另外，您是否在任何地方查找过这个问题？这可能是一个很好的起点：***.com/q/46044276/8816585

【参考方案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 的位置

我在操作部分调用它。它有一个动作。

我能看到你的代码吗？