Question

我在Vuex上遇到了这个问题：

我正在尝试使模块状态下的嵌套对象发生突变。当我进行突变时，它将在模块状态下的所有对象嵌套属性中设置该值。

我动态设置集合对象。我的模块状态：

collection: [{
    id: 1,
    prop: {
      nestedProp: ""
    }
  },
  {
    id: 2,
    prop: {
      nestedProp: ""
    },
  },
]

当我在mutations方法中正确改变状态时，它会复制值：

changeValueById(state) {
    const obj = state.collection.find(obj => obj.id === 1)
    obj.prop.nestedProp = "new value!!"
}

期望值：

// colletion[0].prop.nestedProp === "new value!!"
// colletion[1].prop.nestedProp === ""
// colletion[2].prop.nestedProp === ""

但是我得到了

// colletion[0].prop.nestedProp === "new value!!"
// colletion[1].prop.nestedProp === "new value!!" (duplicated)
// colletion[2].prop.nestedProp === "new value!!" (duplicated)

我以错误的方式改变状态吗？我不明白为什么它会重复整个状态树的值。

Answer 1

该突变看起来不错。看起来您的状态（prop）中的子对象具有相同的引用。检查您设置prop值的代码。如果看起来像这样：

let prop = {nestedProp: ''}
collection = [{id: 1, prop: prop}, {id: 2, prop: prop}] // Using the same instance of prop in each element of the array!

然后这将解释问题。您可以通过在每次设置时克隆该值来解决此问题。像这样：

let prop = {nestedProp: ''}
collection = [{id: 1, prop: JSON.parse(JSON.stringify(prop))}, {id: 2, prop: JSON.parse(JSON.stringify(prop))}]

嵌套对象变异中的Vuex重复值

1 个答案: