vue.js - nuxt 应用程序中的 Vuex 抛出 "Do not mutate vuex store state outside mutation handlers"!

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

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

Answer 1

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

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