javascript - Vuex 和 Firebase 存储状态错误

Question

我的 vuex 商店中有以下设置:我的用户使用 Firebase 身份验证登录。登录后，调用 firebase.auth().onAuthStateChanged 并将 user 设置为 state.user 但也保存在 Firebase 数据库中。当我添加代码的最后一部分 (database.ref...) 时，我的控制台出现错误。然而，这些错误与 Firebase 无关，而是与 Vuex 相关。

错误如下(x80):

[Vue warn]: Error in callback for watcher "function () { return this._data.$$state }":

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

我的代码仍然有效，但在开发过程中，我不想在用户登录时看到 80 错误。我怎样才能摆脱这些错误？

// actions
const actions = {
  startListeningToAuth ({ commit }) {
    firebase.auth().onAuthStateChanged((user) => {
      commit(types.SET_USER, { user })
    })
  }
}

// mutations
const mutations = {
  [types.SET_USER] (state, { user }) {
    state.user = user

    if (user) {
      database.ref('users/' + user.uid).set({
        name: user.displayName,
        email: user.email,
        photo_url: user.photoURL
      })
    }
  }
}

Answer 1

您可以对 firebase.User 界面使用 toJSON() 方法

commit(types.SET_USER, { user.toJSON() })

这将允许在没有警告的情况下将用户数据添加到您的商店，但我想您可能会丢失来自 firebase 的实时用户状态。

参见 https://firebase.google.com/docs/reference/js/firebase.User#toJSON