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

Question

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

在 vuex 中，我有一个存储有两个 getter：所有图形节点的详细信息列表，以及当前选定节点的另一个属性（如果用户没有选择/取消选择一个，则为 null）。

图在 3rd 方库中，需要在 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，它永远不会检测到 name 属性的更改。

编辑

为了澄清，问题是 getCurrentWorkItem 返回选定的节点，如果没有选择，则返回 null。因为它发生了变化，所以我无法检测到它的 name 属性的后续变化

谢谢。

Answer 1

onSelectedNameChange 不会在 selectedItem 更改时重新计算。

您可以改为添加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;
        }
    }
}