如何在 vuex 中查看动态变量上的属性？

Question

我在侧面板组件上有一个输入，当在图表中选择一个节点时有条件地显示该输入。输入对应于节点名称。输入是侧面板组件的一部分。该图在它自己的图组件中。

在 vuex 中，我有一个有两个 getter 的商店：所有图形节点的详细信息列表，以及当前选定节点的另一个属性（如果用户没有 [=31，则为 null） =]一个）。

该图位于第 3 方库中，需要在 Vue 中更改节点名称时得到通知。由于图表位于页面的一个完全独立的部分和不同的组件中，我正在努力弄清楚如何检测到变化。

简而言之 - 当所选节点可以更改（并且可以为空？）时，您如何在所选节点上监视属性。如果这需要架构更改，那很好，我想这样做 "right way" 但我不知道正确的方法是什么。

我试过了：

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;
        }
}

在图形组件中，但由于所选项目最初为空，因此它永远不会检测到对名称的更改属性。

编辑

澄清一下，问题是 getCurrentWorkItem returns 所选节点，如果没有选择，则为 null。因为它发生了变化，所以我无法检测到其名称的后续变化属性

谢谢。

Answer 1

当 selectedItem 改变时 onSelectedNameChange 不会重新计算。

您可以添加 watcher。

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;
        }
    }
}

如何在 vuex 中查看动态变量上的属性？

How to watch a property on a dynamic variable in vuex?

vue.js

vuex

编辑

如何在 vuex 中查看动态变量上的 属性？

How to watch a property on a dynamic variable in vuex?

vue.js

vuex

编辑

如何在 vuex 中查看动态变量上的属性？