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

您可以将toJSON（）方法用于firebase.User接口

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
  }
}

Answer 3

您想在注册后设置用户数据吗？这是我执行此操作的代码

firebase.auth().createUserWithEmailAndPassword(email, password)
                .then((user) => {
                    //init user
                    userRef.child(user.uid).set({
                        email: email,
                        //Other data 
                    });
                })
                .catch((error) => {
                    state.isRegenter code hereister = false;
                    console.log(error);
});

Vuex和Firebase存储状态错误

3 个答案: