Vuex和Firebase存储状态错误

Question

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

错误如下(x80):

[Vue警告]:观察者回调错误"function(){return this._data.$$ state}":

错误:[vuex]不要在变异处理程序之外改变vuex存储状态.

我的代码仍然有效,但在开发过程中,我不希望在用户登录时看到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

Answer 2

突变应该只包含直接影响 vuex 的代码state。

您收到错误是因为database.ref()很可能user以某种方式修改了对象。在您的突变中，state.user = user使您的state.user对象引用与user变量相同的对象。因此，如果user在突变之外发生变化，状态也会发生变化，Vue 会对你大喊大叫。

您应该将database.ref()调用移至相关的操作方法，然后提交突变。由于database.ref()是异步的，因此您需要等待该方法完成才能提交突变：

// actions
const actions = {
  startListeningToAuth ({ commit }) {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        database.ref('users/' + user.uid).set({
          name: user.displayName,
          email: user.email,
          photo_url: user.photoURL
        }).then(() => {
          commit(types.SET_USER, { user })
        })
      }
    })
  }
}

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