깊은 중첩 객체의 반응성이 작동하지 않음

깊은 중첩 객체의 반응성이 작동하지 않음

나는 콘바즈랑 일하고 있어.설명을 좀 드리자면 기본적으로 캔버스 위에 물건을 그리고 편집, 이동, 삭제 등의 작업을 하는 겁니다.

예: 사람들은 'n drop a(텍스트)노드를 끌 수 있다.노드가 그룹에 추가되고, 이 노드는 내 (a) 계층에 추가된 내 컨테이너 그룹에 추가된다. (아래 코드 예)

이 기능을 위해 나는 Vuex를 사용하고 있다.그래서 나는 내 데이터를 Vuex로 설정했다.그리고 설정되면 내 노드가 목록에 나타나도록 계층을 업데이트하고 싶다.(작동되지 않음)

노드를 생성할 때 노드를 그룹, 컨테이너 등에 추가하는 모든 기능을 수행한다.이 모든 것이 끝나면 나는 내 층을 커밋하고 싶다.업데이트된 상태를 구성 요소로 가져오려고 하는데 '그룹A'에 노드를 추가할 때 업데이트가 수신되지 않음.

// Commit layer
store.store.commit('node/setLayer', layer)

// Change state
setLayer(state, payload) {
    Vue.set(state.layers, state.activeLayer, payload)
}

나는 지금 잠시 동안 검색해 보았으나 항상 나에게 맞지 않는 동일한 해결책을 찾아낸다.

Object.assign()

Vue.set()

나는 이 옵션들이 데이터를 재할당해서 Vue가 주(州)가 변이되었다는 것을 알도록 하는 것이라는 것을 안다.하지만 그것들 역시 효과가 없다.아마도 내가 그것들을 잘못 사용하고 있는 것 같다.그렇기 때문에 앞으로 나를 이해하고 도와주는 법을 배우고 싶다.

다른 돌연변이를 일으키면 내 계층 목록이 업데이트될 거야그것은 내가 그의 일을 하지 않는 반응성에 대해 생각하게 하거나, 적어도 그것이 어떻게 작용해야 한다고 생각하는지에 대해 생각하게 만든다.

내 목적의 예:

state: {
    layers: {
        a: {
            groups: {
                groupA: {
                    nodeText1: {
                        attrs: {
                            width: 100,
                            height: 100
                        }
                    },
                    nodeText2: {
                        attrs: {
                            width: 100,
                            height: 100
                        }
                    },
                    ...: {}
                },
                groupB: {
                    node: {
                        attrs: {
                            width: 100,
                            height: 100
                        }
                    }
                }
            }
        },
        b: {
            groups: {
                groupC: {
                    node: {
                        attrs: {
                            width: 100,
                            height: 100
                        }
                    }
                }

            }
        }
    }
}

누가 날 좀 도와줬으면 좋겠어

미리 고마웠어.

나는 층의 자아를 대체하는 대신 근원을 재정립하여 문제를 해결했다.

mutations: {
  setLayer(state, layer) {
    state.layers = {
      ...state.layers,
      layer
    }
  }
}

참조URL: https://stackoverflow.com/questions/66493107/reactivity-in-deep-nested-objects-not-working