Vuex＆VueJS（変異ハンドラ外vuex店の状態を変化させません。）

Question

私は、ユーザーが持っているときvuexストアを通知するfirebaseに「はをonAuthStateChanged」時計listenAuth機能を作成しようとしていますログインまたはログアウトします。限り、私は何かが不足していない限り、私はmutationハンドラを使って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) 
} 

0123ここで

は、同じ問題で苦労した後に私の店（かまい部品）

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

const state = { 
    authData: {} 
} 

Answer 1

だ、私たちはVuex状態での認証/ユーザーデータを保存しようとするとエラーにのみ起こることがわかりました。

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

あなたのケースを解決するだろうから変更

...

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

...に...。

Answer 2

私もこの問題を遭遇しました。マイストア：

で state.items = payload.itemsを置き換えることによって、それを修正

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

：

状態オブジェクト、使用のために

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))を使用していません。