Two less known facts about Vuex
When using Vuex in our Vue.js components we tend to forget the amazing API that it exposes beside the mapping functions.
Let's see what we can do with it, but first let's create a basic store for our examples:
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
getCountPlusOne: state => state.count + 1
},
mutations: {
increment(state) {
state.count++;
}
}
});
# Watch
The watch method is the most useful to integrate Vuex with external code, be it in your awesomeService
or in your catchAllAuthUtils
.
This is how to use it:
const unsubscribe = store.watch(
(state, getters) => {
return [state.count, getters.getCountPlusOne];
},
watched => {
console.log("Count is:", watched[0]);
console.log("Count plus one is:", watched[1]);
},
{}
);
// To unsubscribe:
unsubscribe();
What we are doing is to call the watch
method with two functions, one to return what part of the state and/or getters we want to keep an eye on and the other with the function that we want to invoke when state.count
or getCountPlusOne
change.
This is extremely useful to integrate with react code or angular or even... JQuery!
See the example in this CodeSandbox.
# SubscribeAction
Sometimes instead of watching a store property change it's more useful to react to a specific action, login
and logout
come in mind, vuex has us covered with subscribeAction
.
Calling subscribe adds a 'callback' that is run at every action and that we can use to call custom code.
Let's use it to start and stop a global spinner before and after every action!
const unsubscribe = store.subscribeAction({
before: (action, state) => {
startBigLoadingSpinner();
},
after: (action, state) => {
stoptBigLoadingSpinner();
}
});
// To unsubscribe:
unsubscribe();
Related Articles
Creating a Store without Vuex in Vue.js 2.6
Tip on creating a simple store in Vue.js 2.6 by using the new Observable API

Feb 17, 2019
Hybrid Rendering: the secret way to smoothly test Vue.js components
Find out how to combine Deep and Shallow Rendering in order to achieve a flexible solution to test your Vue.js combining the best of both worlds.

Mar 7, 2022
How to use script setup in Nuxt 2
If you love Vue script setup and want to use it in your current Nuxt 2 project, the Nuxt team has made it possible to start using it today!

Feb 14, 2022
Sponsors
VueDose is proudly supported by its sponsors. If you enjoy it, consider supporting it to ensure the project maintainability.