Understanding the Vuex plugin system

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) {
      store.commit(types.UPDATE_LAST_EDIT_DATE);
    }
  });
};

Since we can subscribe to every mutation...