Vuex- und Firebase-Speicherstatusfehler

Question

Ich habe die folgende Konfiguration in meinem vuex-Speicher: Meine Benutzer melden sich mit Firebase-Authentifizierung an. Nach der Anmeldung wird firebase.auth().onAuthStateChanged aufgerufen und user wird auf state.user festgelegt, aber auch in der Firebase-Datenbank gespeichert. In dem Moment, in dem ich den letzten Teil meines Codes (database.ref...) hinzufüge, explodiert meine Konsole mit Fehlern. Die Fehler beziehen sich jedoch nicht auf Firebase, sondern auf Vuex.

Fehler sind die folgenden (x80):

[Vue warn]: Error in callback for watcher "function() { return this._data.$$state }":

Error: [vuex] Do not mutate vuex store state outside mutation handlers.

noch Mein Code funktioniert, aber während der Entwicklung, ich will nicht 80 Fehler, wenn der Benutzer sich anmeldet, um zu sehen Wie kann ich diese loswerden. Fehler?

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

Mutationen sollten nur Code enthalten, der die vuex state direkt beeinflusst.

Sie erhalten die Fehler, weil wahrscheinlich das user Objekt in irgendeiner Weise verändert. In Ihrer Mutation state.user = user macht es so, dass Ihr state.user Objekt auf dasselbe Objekt wie Ihre user Variable verweist. Wenn sich also user außerhalb der Mutation ändert, ändert sich auch der Zustand und Vue wird dich anschreien.

Sie sollten Ihren Aufruf auf die verwandte Aktionsmethode verschieben und dann die Mutation festschreiben. Da database.ref() async ist, müssen Sie warten, dass Verfahren vor Begehung der Mutation zu beenden:

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

Wollten Sie gesetzt, nachdem registrieren Benutzerdaten? dies ist mein Code, um dieses

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

Sie toJSON verwenden können, zu tun() -Methode zum firebase.User Schnittstelle

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

Dies ermöglicht es, um Benutzerdaten zu Ihrem Geschäft ohne Warnungen hinzufügen, aber ich denke, dass Sie den Echtzeitbenutzerstatus von Firebase verlieren können.

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