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