정규화된 데이터가 있는 Vuex getter가 반응하지 않음

정규화된 데이터가 있는 Vuex getter가 반응하지 않음

Vuex 앱에서 데이터를 정규화했지만 데이터 변경 내용을 확인하는 방법에 대한 답을 찾을 수 없습니다.예를 들어, 여기 내 설정의 간단한 버전이 있습니다.

상태:

const state = {
    shapes: {
        collection: [1, 2, 3],

        data: {
            1: {
                type: 'circle',
                isActive: false,
            },
        },
    }
}

취득자:

const getters = {
    findShape: (state) => (id) => {
        return state.shapes.data[id];
    }

    allShapes: (state, getters) => {
        return state.shapes.collection.map(id => getters.findShape(id));
    }
}

내 구성 요소에서 계산된 속성의 allShapes getter를 호출하고 v-for를 통해 모양을 하위 구성 요소로 전달합니다.

computed: {
    shapes() {
        return this.$store.getters.allShapes;
    }
}

도형을 추가 및 삭제하면 정상적으로 동작합니다.문제는 데이터 개체의 속성을 업데이트할 때마다 변경 내용이 내 구성 요소에 반영되지 않는다는 것입니다.다음은 isActive 속성을 설정하는 변환입니다.

const mutations = {
    setActive(state, shape) {
        Vue.set(state.shapes.data[shape.id], 'isActive', shape.isActive);
    }
}

그런 다음 isActive 속성을 참조하는 구성 요소는 업데이트되지 않습니다.이 문제가 발생하는 이유는 알겠지만, 중첩된 어레이 구조로 돌아가는 것 외에는 해결책을 찾지 못했습니다.데이터 개체가 변경될 때 allShapes getter에서 업데이트를 트리거하는 방법이 있습니까?또는 데이터를 컴포넌트로 가져와 반응하도록 하는 다른 방법이 있습니까?

먼저, 에 대한 약간의 배경.Vue.set.

부르기Vue.set는 다음 두 가지 작업을 수행합니다.

1. 속성이 아직 존재하지 않으면 반응형 속성으로 추가됩니다.
2. 속성 값이 업데이트됩니다.

여기 엣지 케이스가 있어요.속성이 이미 존재하지만 반응하지 않는 경우 다음을 사용합니다.Vue.set반응성을 높이지 않습니다.

디폴트로는 의 속성state리액티브하게 되어 이 리액티브는 그 안에 있는 모든 오브젝트 및 어레이에 재귀적으로 적용됩니다.state단, 새로운 속성 추가 시 일반적인 경고가 적용됩니다.새 속성 추가를 Vue에서 감지할 수 없으므로 반응하지 않습니다.이것은 의 사용 사례입니다.Vue.set새 속성을 추가합니다.

대부분의 경우 데이터를 서버에서 로딩하여 데이터 저장에 사용할 수 있습니다.data내면의 오브젝트state이 점이 바로 대응해야 할 중요한 포인트입니다.업데이트하러 올 때까지isActive너무 늦었을 수도 있어요

다음과 같은 돌연변이가 있을 수 있습니다.

addShape (state, shape) {
  state.shapes.data[shape.id] = shape
}

이 지점이 반응성이 떨어지는 지점입니다. 왜냐하면 새로운 속성을 추가되는 것입니다.state.shapes.data그 결과, 그 결과,shape물체는 반응성 시스템에 의해 처리되지 않기 때문에 어떤 특성도 반응하지 않습니다.

경우,isActive자산이 존재하지 않는 경우 실제로 빠져나갈 수도 있습니다.시나리오에서는 「」를 합니다.Vue.set이 특성이 누락된 것을 발견하고 반응성을 포함하여 추가합니다.그것은 사실 그것보다 더 많은 것을 할 것이다.오브젝트는 아직 반응하지 않기 때문에 오브젝트 전체를 통과하여 모든 속성을 반응시킵니다.하지 않는 은, 「동행하지 않는」의 관련 입니다.state.shapes.data.

, 속성 「」, 「」, 「」, 「」가 되어 것 .isActive처음부터 존재합니다.그 결과이다Vue.setisActive대신 개체를 캐시에 처음 추가할 때 사용해야 합니다. §:

addShape (state, shape) {
  Vue.set(state.shapes.data, shape.id, shape)
}

몇 추측을 .state.shapes.data하지만 당신의 코드가 제가 설명한 것과 완전히 다르더라도 같은 수정이 적용될 수 있을 정도로 비슷할 것입니다.

【】만 있으면 된다.isActive되어 있기 때문에 할 필요는 isActive를 사용합니다.Vue.set캐시에 쉐이프를 추가하는 것으로 충분합니다.

언급URL : https://stackoverflow.com/questions/59060860/vuex-getters-with-normalized-data-is-not-reactive