Vuex & VueJS (non mutano vuex stato negozio di fuori gestori di mutazione)

Question

Sto cercando di creare una funzione listenAuth che orologi "onAuthStateChanged" in Firebase di notificare il negozio vuex quando un utente ha accesso o uscita. Per quanto posso dire, sto solo modificando state.authData usando il gestore di mutazione, a meno che mi manchi qualcosa?

sto ottenendo l'errore:

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

Ecco il mio javascript App.vue (dal mio componente)

<script> 
// import Navigation from './components/Navigation' 
import * as actions from './vuex/actions' 
import store from './vuex/store' 
import firebase from 'firebase/app' 

export default { 
    store, 
    ready: function() { 
    this.listenAuth() 
    }, 
    vuex: { 
    actions, 
    getters: { 
     authData: state => state.authData, 
     user: state => state.user 
    } 
    }, 
    components: { 
    // Navigation 
    }, 
    watch: { 
    authData (val) { 
     if (!val) { 
     this.redirectLogin 
     this.$route.router.go('/login') 
     } 
    } 
    }, 
    methods: { 
    listenAuth: function() { 
     firebase.auth().onAuthStateChanged((authData) => { 
     this.changeAuth(authData) 
     }) 
    } 
    } 
} 
</script> 

ecco la mia azione di funzione (changeAuth)

export const changeAuth = ({ dispatch, state }, authData) => { 
    dispatch(types.AUTH_CHANGED, authData) 
} 

Ecco il mio negozio (le parti che contano)

const mutations = { 
    AUTH_CHANGED (state, authData) { 
    state.authData = authData 
    } 
} 

const state = { 
    authData: {} 
} 

Answer 1

Dopo aver lottato con lo stesso problema, ho scoperto che l'errore si verifica solo quando cerchiamo di memorizzare i dati di autenticazione/utente nella condizione Vuex.

Cambiare da ...

const mutations = { 
    AUTH_CHANGED (state, authData) { 
    state.authData = authData 
    } 
} 

... al ...

const mutations = { 
    AUTH_CHANGED (state, authData) { 
    state.authData = JSON.parse(JSON.stringify(authData)) 
    } 
} 

avrebbe risolto il vostro caso.

Answer 2

Mi sono imbattuto in questo problema. Il mio negozio:

state: { 
    items: [] 
    }, 
    mutations: { 
    SetItems (state, payload) { 
     // Warning 
     state.items = payload.items 
    } 
    }, 
    actions: { 
    FetchItems ({commit, state}, payload) { 
     api.getItemsData(payload.sheetID) 
     .then(items => commit('SetItems', {items})) 
    } 
    } 

fisso è da sostituire state.items = payload.items con:

state.items = payload.items.slice() 

The reason is that arrays are stored as references in Javascript and payload.items is likely to be changed outside Vuex. So we should just use a fresh copy of payload.items instead.

Per gli oggetti di stato, l'uso:

state.someObj = Object.assign({}, payload.someObj) 

e non utilizzarlo JSON.parse(JSON.stringify(someObj)) in quanto è molto più lento .