组件代码:
selectItem(item,index) { this.selectPlay({ list: this.songs, index }) }, ...mapActions([ 'selectPlay' ])
mutation 代码:
[types.SET_PLAYLIST](state, list) { // 1、state.playlist = JSON.parse(JSON.stringify(list)) // 2、state.playlist = Object.assign([], list) state.sequenceList = list }, [types.SET_SEQUENCE_LIST](state, list) { // 1、state.sequenceList = JSON.parse(JSON.stringify(list)) // 2、state.sequenceList = Object.assign([], list) state.sequenceList = list },
actions 代码:
import * as types from './mutation-types' export const selectPlay = function({commit, state}, {list, index}) { commit(types.SET_SEQUENCE_LIST, list) commit(types.SET_PLAYLIST, list) commit(types.SET_CURRENT_INDEX, index) commit(types.SET_FULL_SCREEN, true) commit(types.SET_PLAYING_STATE, true) }
一直报 Do not mutate vuex store state outside mutation handlers.
但是确实是在mutation 的 handler 里面更改的状态,而且是 commit 的。
问题出在了 payload ,在这的 list 是一个数组,是一个引用类型,所以就有可能在 vuex 之外的地方改变了 list。那么就有可能 this._committing 的值就不会变为 true 。所以就会报这个错。
解决办法就是把 list clone一下,在 mutation 代码那块的注释部分就是 clone 的办法,这样就不会在 vuex 之外的地方改变 state 了。推荐使用第二个方法,第二个方法的性能优于第一个