nuxt 应用程序中的 Vuex 抛出“不要在突变处理程序之外改变 vuex 存储状态”！答案

【问题标题】：Vuex inside nuxt app throws "Do not mutate vuex store state outside mutation handlers"!nuxt 应用程序中的 Vuex 抛出“不要在突变处理程序之外改变 vuex 存储状态”！
【发布时间】：2018-08-04 14:29:35
【问题描述】：

在我的 NUXT 应用程序中，我使用的是 vuex 存储模块！当我运行应用程序并调用时

this.$store.dispatch('userStore/setLoggedInUser',currentUser); //default.vue

我收到一条错误消息，说“不要在突变处理程序之外改变 vuex 存储状态”，它会无限循环！

我的模块如下所示：

const actions = {
  setLoggedInUser({commit},currentUser){
    return new Promise((resolve,reject)=>{
      commit('mutateLoggedInUser',currentUser);
      resolve();
    });
  }
}

const mutations = {
  mutateLoggedInUser(state,user){
    state.loggedInUser = user;
  }
}

我找到了一个解决方案（有点）。通过在 store/index.js 文件中将严格模式设置为 false，错误就会消失。

export const strict = false

但这似乎是一个 hacky 解决方案，我真的不明白发生了什么。这是 NUXT 中的错误还是我在我的 vuex 商店中做了一些奇怪的事情？

【问题讨论】：

从未在突变中看到/使用过普通的return;。我只是好奇删除它是否会阻止错误触发。当然这个错误看起来很奇怪。
不，它没有：/ 添加它以尝试摆脱错误...
您确定问题出在此代码上吗？这看起来不错。
不太可能是导致问题的代码。也许在别的地方你有一些观察者..
您是否尝试过直接调用突变而不是调用动作？并查看错误是否仍然存在

标签： vue.js vuex nuxt.js vuex-modules

【解决方案1】：

如果您在某处观看传入的值导致无限更新循环，则通常会发生此错误，但如果您没有观看，则可能是由于您传入了原始值而不是副本。

尝试更改： state.loggedInUser = user 到 state.loggedInUser = user.slice() 或者 this.$store.dispatch('userStore/setLoggedInUser',currentUser.slice())

【讨论】：

切片函数有什么作用？
@AbingPj 它创建了一个数组的浅拷贝。它可以使用 start 和 end 参数来指定数组的某个部分，但在这种情况下，如果没有它们，它将复制整个数组。