Question

更新：仅在启用vuex严格模式时才会发生此错误

我正在使用Firebase身份验证构建Vue应用程序，但该应用程序失败并显示以下错误消息：

[Vue警告]：监视程序的回调发生错误“ function（）{return this._data。$$ state}”：“错误：[vuex]不要在变异处理程序之外变异vuex存储状态。”

错误：[vuex]请勿在变异处理程序之外对vuex存储状态进行变异。

未捕获的RangeError：超出了最大调用堆栈大小

当我将用户提交到main.ts文件中的Vuex存储时，会发生错误：

firebase.auth().onAuthStateChanged(user => {
  if (user) {
    store.commit(constants.auth.SET_USER, user) // THIS LINE
    store.commit(constants.auth.SET_AUTHENTICATED, true)
    router.push('/')
  } else {
    store.commit(constants.auth.SET_USER, null)
    store.commit(constants.auth.SET_AUTHENTICATED, false)
    router.push('/signup')
  }
  if (!app) {
    app = new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount('#app')
  }
})

这是我的突变：

[constants.auth.SET_USER](state: AuthState, payload: firebase.User): void {
      state.user = payload
}

我可以从Vue devtools看出，实际上确实发生了这种突变，并且用户已委托给商店，但是我不知道为什么会发生此错误。你能帮我吗？

我尝试注释掉应用程序中几乎所有其他内容，而这是唯一会引起麻烦的部分。

Answer 1

将user.toJSON()存储在您的状态。 firebase用户是一个复杂的对象，不应以vuex状态存储。

Answer 2

我认为您可能需要将firebase.auth().onAuthStateChanged包裹在new Promise中。

看这个例子：https://forum.vuejs.org/t/vue-routes-firebase-auth-sync-problem/4470#post2

在vuex中设置firebase.User会导致永恒循环

2 个答案: