A Vuex plugin is a function that receives the application store as the only argument and can subscribe to mutations.
The following is an example of a plugin:
const consolePlugin = (store) => {
store.subscribe((mutation, state) => {
// called after every mutation.
// The mutation comes in the format of { type, payload }.
console.log(mutation, state);
});
};
You can add a plugin to the store as follows:
const store = new Vuex.Store({
// ...
plugins: [consolePlugin]
});
Like components, plugins cannot directly alter the state; they have to commit a mutation.
For example, imagine that we want to show the last time a mutation has been committed. We could write a plugin as follows:
// src/store/plugins.js
// ...
const lastEditDate = (store) => {
store.subscribe((mutation) => {
if (mutation.type !== types.UPDATE_LAST_EDIT_DATE...