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

Posted 2023-02-22

【中文标题】在 vuex 中设置 firebase.User 会导致永恒循环

【英文标题】：Setting firebase.User in vuex results in eternal loop

【发布时间】：2019-08-09 06:09:37

【问题描述】：

更新：此错误仅在启用 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 得知，突变确实发生了，并且用户致力于商店，但我不知道为什么会发生这个错误。你能帮帮我吗？

我已经尝试注释掉应用程序中的几乎所有其他内容，而这些是唯一会导致任何问题的部分。

【问题讨论】：

你看过这个帖子吗：forum.quasar-framework.org/topic/546/…

是的，但我没有使用 v-model，所以我认为它对我没有帮助。您知道如何在我的情况下使用它吗？

【参考方案1】：

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

【参考方案2】：

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

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