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

Question

在我的 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

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

Answer 1

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

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