vuex의 동적 변수에 대한 속성을 보는 방법

vuex의 동적 변수에 대한 속성을 보는 방법

나는 노드가 그래프에서 선택되었을 때 조건부로 표시되는 측면 패널 구성요소에 입력을 가지고 있다.입력은 노드 이름에 해당된다.입력은 측면 패널 구성 요소의 일부분이다.그래프는 자체 그래프 구성 요소 안에 있다.

vuex에는 모든 그래프 노드의 세부 정보 목록과 현재 선택된 노드의 다른 속성(또는 사용자가 선택하지 않은 경우 null)이라는 두 개의 게터가 있는 저장소가 있다.

이 그래프는 타사 라이브러리에 있으며 Vue 내에서 노드 이름이 변경될 때 알림을 받아야 한다.그래프가 페이지의 완전히 분리된 부분과 다른 구성요소에 있기 때문에 나는 변화를 감지하는 방법을 찾기 위해 애쓰고 있다.

요컨대, 선택한 노드가 변경될 수 있을 때(그리고 무효가 될 수 있을 때) 선택한 노드의 속성을 어떻게 감시하십니까?만약 이것이 괜찮은 건축적 변화를 필요로 한다면 나는 그것을 "올바른 방법"으로 하고 싶지만 나는 올바른 방법이 무엇인지 모르겠다.

나는 노력했다:

computed: {
    selectedItem: {
            get: function () {
                let options = this.$store.getters.getCurrentWorkItem;
                return options;
            }
        },
        onSelectedNameChange: function() {
            var selected = this.selectedItem;

            if (!selected) return;

            var text = selected.name;
            debugger;
        }
}

그래프 구성 요소 내에서 그러나 선택한 항목이 처음에 null이기 때문에 이름 속성의 변경은 감지하지 못한다.

편집

명확히 하자면, getCurrentWorkItem은 선택한 노드를 반환하거나 선택 항목이 없는 경우 null을 반환하는 것이다.그것이 변하기 때문에, 나는 그것의 이름 속성에 대한 후속적인 변경을 감지할 수 없음

고마워요.

저것onSelectedNameChange다음 시간 동안 다시 계산하지 않음selectedItem변화들

대신 감시자를 추가할 수 있다.

computed: {
    selectedItem: {
        get: function () {
            let options = this.$store.getters.getCurrentWorkItem;
            return options;
        }
    },
},
watch: {
    selectedItem: {
        immediate: true,              // so this runs initially
        deep: true,                   // so it detects changes to properties only
        handler(newVal, oldVal) {
            console.log('selectedItem changed!', oldVal, '-->', newVal);

            var selected = this.selectedItem;

            if (!selected) return;

            var text = selected.name;
            debugger;
        }
    }
}

참조URL: https://stackoverflow.com/questions/49758130/how-to-watch-a-property-on-a-dynamic-variable-in-vuex