嵌套对象突变中的Vuex重复值答案

【问题标题】：Vuex duplicate values in nested object mutations嵌套对象突变中的Vuex重复值
【发布时间】：2019-05-05 06:21:56
【问题描述】：

我在使用 Vuex 时遇到了这个问题：

我试图在我的模块状态中改变一个嵌套对象。当我进行突变时，它会在我的模块状态中设置所有对象嵌套属性中的值。

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

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

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

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)

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

【问题讨论】：

也许尝试用这样的东西替换你当前的 mutator 函数： state.collection = state.collection.map(item => {if (item.id===1) item.prop.nestedProp = 'new new value'}) 也许其他人可以确认，但我怀疑 Vue 内部有些东西不允许您通过引用设置状态。

标签： vue.js vuejs2 vuex

【解决方案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))}]

【讨论】：

确实是参考。非常感谢。