중첩된 개체 돌연변이의 Vuex 중복 값

중첩된 개체 돌연변이의 Vuex 중복 값

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)

제가 국가를 잘못된 방식으로 변형시키고 있나요?나는 왜 그것이 전체 상태 트리의 가치를 복제하는지 이해할 수 없습니다.

돌연변이는 괜찮아 보입니다.상태에 있는 하위 개체처럼 보입니다.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))}]

언급URL : https://stackoverflow.com/questions/53602531/vuex-duplicate-values-in-nested-object-mutations