Vuex & VueJS (Не мутировать vuex магазин состояние за пределами обработчиков мутации)

Question

Я пытаюсь создать функцию listenAuth, что часы «onAuthStateChanged» в firebase уведомить vuex магазин когда пользователь имеет вход в систему или выход. Насколько я могу судить, я только изменяю state.authData с помощью обработчика мутаций, если только я что-то не хватает?

Я получаю сообщение об ошибке:

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

Вот мой App.vue Javascript (из моего компонента)

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

Вот мои действия функции (changeAuth)

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

Вот мой магазин (части, которые имеют значение)

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

const state = { 
    authData: {} 
} 

Answer 1

После борьбы с такой же проблемой, я обнаружил, что ошибка происходит только тогда, когда мы пытаемся хранить данные аутентификации/пользователя в состоянии Vuex.

Переход от ...

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

... до ...

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

бы решить дело.

Answer 2

Я также столкнулся с этой проблемой. Мой магазин:

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

Fixed это путем замены state.items = payload.items с:

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.

Для государственных объектов, использование:

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

И не используйте JSON.parse(JSON.stringify(someObj)), как это гораздо медленнее ,