Question

我正在尝试覆盖商店内称为device的数组内的对象。突变saveState会接收一个设备，如果设备数组中不存在该设备，则会推送该对象，但如果该对象已经存在，则将其替换为接收到的设备。我尝试寻找解决方案将近一天，但我的代码无法解决问题。

store.device.js

export const state = () => ({
  device: []
})

export const mutations = {
  saveState(state, device) {
    var index = state.device.findIndex(dev => dev.id == device.id)
    index === -1 ? state.device.push(device) : (state.device[index] = device)
  }
}

export const getters = {
  getStateById: state => id => {
    return state.device.find(dev => dev.id === id)
  }
}

Answer 1

您遇到的问题是，当您像尝试使用state.device[index] = device一样直接尝试设置数组索引时，Vue无法检测到状态更改。

为此，他们提供了Vue.set，它允许您在特定索引处更新数组。它的用法如下：

//Vue.set(array, indexOfItem, newValue)
index === -1 ? state.device.push(device) : Vue.set(state.device, index, device);

您可以在文档here

中对其进行阅读

不要在变异处理程序之外变异vuex存储状态

1 个答案: