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

Question

I have a input on a side panel component that is conditionally displayed when a node is selected in a graph. The input corresponds to the nodes name. The input is part of a side panel component. The graph is in it's own graph component.

In vuex, I have a store that has two getters: the list of details for all graph nodes, and another property for the current selected node (or null if the user hasn't selected/deselects one).

The graph is in a 3rd party library and needs to be notified when the node name is changed within Vue. As the graph is in a completely separate part of the page and in a different component I am struggling to work out how I'd detect the change.

In short - how do you watch for a property on the selected node, when the selected node can change (and be nullable?). If this requires an architectural change thats fine I want to do it the "right way" but I dont know what the right way is.

I tried:

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

Within the graph component but because the selected item is initially null it never detects changes to the name property.

EDIT

To clarify, the issue is getCurrentWorkItem returns the selected node or null if there isnt a selection. Because it changes, I am not able to detect subsequent changes to it's name property

Thanks.

Answer 1

That onSelectedNameChange will not recalculate when selectedItem changes.

You could add a watcher instead.

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