Vuex＆VueJS（不要变异突变处理之外vuex商店状态）

我试图创建一个listenAuth功能手表在火力“onAuthStateChanged”通知vuex店当用户有登录或退出。据我所知，我只使用突变处理程序修改state.authData，除非我失去了一些东西？Vuex＆VueJS（不要变异突变处理之外vuex商店状态）

，我发现了错误：

[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: {} 
}

来源

2016-07-14 Jayson H

您可能需要升级到Vuex 2.0 –

同样的问题挣扎后，我发现，当我们试图在auth /用户数据存储在Vuex状态的错误仅发生。

下更改...

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

...到...

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

将解决你的情况。

来源

2017-05-18 14:54:50

请改用'state.authData = Object.assign（{}，authData）'。看看下面的答案。 –

我也遇到过这个问题。我的店：

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：

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))，因为它是慢得多。

来源

2017-05-19 18:01:31

Vuex＆VueJS（不要变异突变处理之外vuex商店状态）

回答

相关问题