How to set up tracking of a variable from Vuex.store in Vue?

Question

Vue.js

There are two components - A and B. I need that when component A made a change in the store, component B learned about it and performed some function.
I tried to fit a watch in B for this, but did not figure out how to do it. It is possible of course from B to interrogate store periodically. Maybe there is another, native way?

Answer 1

watch works. For example:

watch: {
  '$store.state.module.var': function () { /* ... */ }
}

Answer 2

If you just want to keep track of the change, then getters. In component B, we import them into computed, useimport { mapGetters } from "vuex"

computed: {
...mapGetters('nameModule', ['nameGetter'])
}

and then in the methods write what you want to do if the data changes.

Answer 3

I tried to fit a watch in B for this, but did not figure out how to do it

As the documentation says - do it. You could at least show that you can't do it there.