如果我的变量是数组，如何在vuex中更改状态

Question

我刚开始学习Vue，自己找不到答案。

我有几个数组，其中的数据将从数据库中动态加载。其中的对象有一个isLoaded属性来标识加载状态。

问题是

如何在不将整个对象传递给突变的情况下更改isLoaded的值

就像只传递一个数组的索引和名称一样。

现在我这样做：

export default new Vuex.Store({
state: {
books: [
{
id: 1,
title: 'Random',
img: '',
href: '/',
isLoaded: false
}
],
games: [
{
id: 1,
title: 'Random',
img: '',
href: '/',
isLoaded: false
}
]
},
getters: {
books(state) {
return state.books
},
games(state) {
return state.games
}
},
mutations: {
updateLoadStatus(state, item) {
item.isLoaded = true
}
}
})

需要isLoaded道具才能添加预加载程序类。

<div :class="{loading: !book.isLoaded}">
<img :src="book.img" :alt="book.title" @load="updateLoadStatus(book)">
</div>

我的数组比两个多得多，所以我不想对每个数组单独进行突变。

Answer 1

这就是如何定义其的突变

mutations: {
updateLoadStatus(state, payload) {
state[payload.key][payload.index].isLoaded = payload.value;
}
}

这就是你所说的

this.$store.commit('updateLoadStatus', { key: 'books', index: 1, value:true}); // based on the object you pass as payload..the mutation will update the corresponding array item.