Vuex & VueJS (mutasyon işleyicileri dışında vuex mağaza durumunu mutasyona etmeyin)

Question

Bir kullanıcının sahip olduğunda vuex deposunu bildirmek için Firebase yılında " onAuthStateChanged" saatler bir listenAuth fonksiyonunu oluşturmak çalışıyorum giriş veya çıkış. Anlayabildiğim kadarıyla, bir şeyi kaçırmadığım sürece mutasyon işleyicisini kullanarak state.authData'yi değiştiriyorum.

Şu hatayı alıyorum:

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

İşte (benim bileşeninden) benim App.vue javascript var

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

İşte benim eylem oluyor (changeAuth) işlevi

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

Burada aynı sorunla mücadele sonra benim mağaza (önemli parçaları)

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

const state = { 
    authData: {} 
} 

Answer 1

var, biz Vuex devlet auth/kullanıcı verilerini depolamak çalıştığınızda hata yalnızca olur bulundu.

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

davanızı çözecek Değiştirme gelen

...

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

... için ....

Answer 2

Ayrıca bu sorunla karşılaştım. Çok yavaş olduğu gibi

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

Ve JSON.parse(JSON.stringify(someObj)) kullanmayın: My mağaza: devlet nesneler için

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.

, kullanım:

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

tarafından değerlendirilmiş olan state.items = payload.items yerine Sabit .