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

突变应该只包含直接影响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 2

你要设置用户数据后注册？ 这是我的代码来做到这一点

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

Answer 3

可以使用的toJSON（）方法将firebase.User接口

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

这将允许用户将数据添加到您的店铺没有警告，但我猜您可以从Firebase中丢失实时用户状态。

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