首页 文章

Vuex和Firebase存储状态错误

提问于
浏览 次
5

我在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
      })
    }
  }
}
javascript firebase firebase-realtime-database vue.js vuex

3 回答

  • 3

    您可以使用toJSON（）方法到firebase.User接口

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

    这将允许在没有警告的情况下将用户数据添加到您的商店，但我猜您可以从firebase中丢失实时用户状态 .

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

    回复于
  • 0

    突变应该只包含直接影响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
  }
}
    回复于
  • 0

    您想在注册后设置用户数据吗？这是我的代码来做到这一点

    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);
});
    回复于

相关问题