不要在突变处理程序之外突变vuex的存储状态。

Question

我试图在我的商店里覆盖一个叫做device的数组中的对象，突变saveState接收到一个device，如果device数组中没有这个对象，它就会推送这个对象，但是如果它已经存在，它就会用接收到的device替换掉。我试着找了将近一天的解决方案，但是我的代码中没有这个问题。

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

你遇到的问题是，当你直接尝试设置一个数组索引时，Vue无法检测到状态的变化，就像你在用 state.device[index] = device.

为此他们提供了Vue.set，它允许你在某个索引处更新一个数组。它的用法是这样的。

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

你可以在文档中阅读它 此处