使用vuex的伙伴们可能经常在改变state中的数组或者对象的时候，报这样一个错误 它的意思是不要在mutation函数外修改VUEX存储状态，也就是只能通过mapMutations修改，不能直接修改数组或对象 那么怎么修改它呢？
针对数组和对象
修改数组数据的方法
错误的写法：let playList = state.playList;
正确的写法：let playList = state.playList.slice(); /*不能直接操作state里面的属性，但是可以创建一个副本*/
let currentIndex = state.currentIndex; //而变量只是一个赋值语句，不会修改变量本身
//记录当前歌曲
let currentSong = playList[currentIndex];
playList.splice(currentIndex,0,song)
- playList.splice修改了playList本身，也就是修改了state.playList，不是在mutations的函数内执行，而是在mutations外部执行的，所以会报错
- 所以在后面加一个slice()方法，创建一个副本，相当于一个新数组，不会改变原数组
即回到了，怎么一个对象如何复制给另一个对象，且互不影响的问题上
- 一种是assign方法
let newTest = Object.assign({},this.test)
- 另一种是JSON的内置方法
let newTest = JSON.parse(JSON.stringify(this.test))
我的解决办法
在mutations里
setxxx (state, option) {
state.xxx = JSON.parse(JSON.stringify(option));
},
异步操作中无法修改state的属性
export default {
[type.GET_PAPERS] (state, force = false) {
fetch(`${apiUrl}/api/paper`).then(r => r.json())
.then(data => state.papers = data) // Error: [vuex] Do not mutate vuex store state outside mutation handlers.
// state.papers = [1, 2, 3, 4] // ok
}
}
请仔细看文档。mutation 必须同步，任何异步只能出现在 action 里。
参考：
Vuex 中操作数组，报错 Do not mutate vuex store state outside mutation handler
vue报错：[vuex] Do not mutate vuex store state outside mutation handlers
关于 vuex 报错 Do not mutate vuex store state outside mutation handlers.
