Vuex plugins have a wide variety of use cases. In this tutorial, we’ll show you how to create a custom Vuex plugin.

Vuex plugins are among the most advanced and useful concepts in Vuex. They have a wide variety of use cases, from data persistence, to Slack Notifier, to enhacing Vuex itself.

A Vuex plugin is simply a function that receives the store as the only argument. In simple terms, a plugin is a function that is triggered/called when a certain type of mutation or action is called in Vuex.

In this tutorial, we’ll walk you through how to create a custom Vuex plugin.

Subscribing to mutation hooks

When subscribing to mutation hooks, remember that plugins are not allowed to mutate the state directly. They can only trigger changes by committing Vuex mutations.

The Mutations Hook exposes two attributes:

1. mutation.type is used to determine the name of the mutation/action that is triggered
2. mutation.payload is used to retrieve the data to be committed

export default (store) => {
store.subscribe((mutation) => {
if (mutation.type === "STORE_ERRORS") {
// Alert Slack here
console.log(mutation.type, mutation.payload)
}
});
};

#vue #vuex #javascript #developer