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 변수와 동일한 개체를 참조하도록합니다. 따라서 user이 돌연변이 밖에서 변하면 상태도 바뀌고 Vue가 소리를 지르니까.

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

를 설정 한 사용자 데이터 후 등록 싶으 셨나요 : database.ref()이 비동기이기 때문에, 그 방법은 돌연변이를 적용하기 전에 끝날 때까지 기다릴 필요가? 이는 firebase.User 인터페이스

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

이 경고없이 상점에 사용자 데이터를 추가 할 수 있습니다하지만 난 생각이

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에서 실시간 사용자 상태를 잃을 수 있습니다.

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