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

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

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

该图位于第三方库中，当Vue中的节点名称发生更改时，需要通知该图。由于图形位于页面的一个完全独立的部分和另一个组件中，我正在努力找出如何检测更改

简言之，当选定节点可以更改（并且可以为null？）时，如何监视选定节点上的属性。如果这需要架构上的改变，那很好，我想用“正确的方法”来做，但我不知道什么是正确的方法

我试过：

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

在graph组件中，但由于选定项最初为null，因此它从未检测到name属性的更改

编辑 要澄清的是，问题是getCurrentWorkItem返回所选节点，如果没有选择，则返回null。因为它会更改，所以我无法检测到它的name属性的后续更改

---

谢谢。

当

selectednamechange

更改时，

onSelectedNameChange

将不会重新计算

您可以添加一个

计算：{
选择编辑项：{
get:function（）{
让选项=此。$store.getters.getCurrentWorkItem；
返回选项；
}
},
},
观察：{
选择编辑项：{
immediate:true，//因此它最初运行
deep:true，//因此它只检测对属性的更改
处理程序（newVal、oldVal）{
log（'selecteditemchanged！'，oldVal，-->'，newVal）；
var selected=this.selectedItem；
如果（！选中）返回；
var text=selected.name；
调试器；
}
}
}

是“选定节点”

此。$store.getters.getCurrentWorkItem

是：）感谢监视程序在名称更新时或刚开始更新时更新？实际上，它将接收更改。因此，它将在更新发生时运行，初始情况除外。如果您需要的话，我们可以添加一个参数，让它最初运行。

immediate:true

，但是您必须将函数移动到

处理程序中。查看更新的答案。这似乎仍然只在所选项目更改时拾取更改。您在控制台中没有看到类似
selectedItem的更改！未定义-->新项目
。
undefined
表示最初正在运行。