store 存取数据数组对象

store 存取数据数组对象

使用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({},st)

复制代码另一种是JSON的内置方法

let newTest = JSON.parse(JSON.st))

复制代码

我的解决办法

在mutations里

setxxx (state, 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 里。

参考：