Categories
Uncategorized Vue Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *