Question

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

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

图表位于第三方库中，需要在Vue中更改节点名称时收到通知。由于图表位于页面的完全独立部分和不同的组件中，因此我很难弄清楚我是如何检测到更改的。

简而言之 - 当所选节点可以更改（并且可以为空）时，如何在所选节点上查看属性？如果这需要一个很好的架构改变我想要做正确的方式＆＃34;但我不知道正确的方法是什么。

我试过了：

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返回所选节点，如果没有选择则返回null。因为它发生了变化，我无法检测到它的名称属性

的后续更改

感谢。

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

如何在vuex中观察动态变量的属性？

修改

1 个答案: