当前位置: 代码迷 >> 综合 >> vue报错:[vuex] Do not mutate vuex store state outside mutation handlers
  详细解决方案

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

热度:88   发布时间:2023-10-12 17:30:16.0

使用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))
  相关解决方案