由于 js 的限制,Vue 无法进行监听数组的修改,因此在 Vuex 中,下面三种情况 store 中的数据已经变化了,但视图层不会更新:
- 使用索引更新数组的值时
- 修改数组的长度时
- 直接给对象数组中的对象赋值新属性时
解决方式:使用 Vue.set ( target, key, value )
import Vue from 'vue';
export const mutations = {
add(state, data) {
state.powerList.push({
id: data.id,
power: data.power
})
},
remove(state, data) {
state.powerList.splice(state.powerList.findIndex((item) => item.id === data.id), 1)
},
update(state, data) {
//使用Vue.set()
Vue.set(state.powerList.find((item) => item.id === data.id), 'power', data.power)
}
}