Sometimes, we want to watch store values from Vuex with Vue.js.

In this article, we’ll look at how to watch store values from Vuex with Vue.js.

How to watch store values from Vuex with Vue.js?

To watch store values from Vuex with Vue.js, we get the value from a getter.

For instance, we write

<script>
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["myState"]),
  },
  watch: {
    myState(val, oldVal) {
      console.log(val, oldVal);
    },
  },
};
</script>

to call mapGetters to map the myState getter to the myState computed property.

Then we add a watcher for myState and get the current value with val and the previous value with oldVal.

Conclusion

To watch store values from Vuex with Vue.js, we get the value from a getter.