vue报错：[vuex] Do not mutate vuex store state outside mutation handlers

使用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)
1
2
3
4
5
6

• playList.splice修改了playList本身，也就是修改了state.playList，不是在mutations的函数内执行，而是在mutations外部执行的，所以会报错
• 所以在后面加一个slice()方法，创建一个副本，相当于一个新数组，不会改变原数组

修改对象的方法

即回到了，怎么一个对象如何复制给另一个对象，且互不影响的问题上

• 一种是assign方法

let newTest = Object.assign({},this.test)
1

• 另一种是JSON的内置方法

let newTest = JSON.parse(JSON.stringify(this.test))
1