Vuex & VueJS (Sie mutieren nicht vuex store Zustand außerhalb Mutation Handler)

Question

Ich versuche, eine listenAuth Funktion zu erstellen, die "onAuthStateChanged" in Feuerbasis zu benachrichtigen, die vuex Speicher Uhren, wenn ein Benutzer eingeloggt oder abgemeldet. Soweit ich das beurteilen kann, modifiziere ich nur state.authData mit dem Mutationshandler, es sei denn, ich verpasse etwas?

Ich erhalte die Fehlermeldung:

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

Hier ist mein App.vue Javascript (aus meiner Komponente)

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

Hier ist meine Aktion (changeAuth) Funktion

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

meinen Speicher Hier ist (die Teile, die Materie)

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

const state = { 
    authData: {} 
} 

Answer 1

Nachdem mit dem gleichen Problem zu kämpfen, fand ich, dass der Fehler tritt nur auf, wenn wir die Auth/Benutzerdaten im Vuex Zustand zu speichern versuchen.

mächtig ändern ...

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

... bis ...

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

Ihrem Fall lösen würde.

Answer 2

Ich stieß auch auf dieses Problem. Mein Speicher:

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

Fest durch state.items = payload.items ersetzen mit:

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.

Für staatliche Objekte verwenden:

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

Und nicht verwenden JSON.parse(JSON.stringify(someObj)), da es viel langsamer ist .