Enabling the Vuex built-in logger plugin

Vuex provides a built-in plugin to log every mutation. It can be added to the application store as follows:

// src/store/index.js
import createLogger from 'vuex/dist/logger';
// ...

const debug = process.env.NODE_ENV !== 'production';
const plugins = debug ? [createLogger({})] : [];
const store = new Vuex.Store({
  state: {
   // ...
  },
  mutations,
  actions,
  strict: debug,
  plugins,
});

The resulting output for the EveryNote app is:

Figure 4.8: Vuex built-in logger plugin

As you can see in the preceding screenshot, it logs not only the mutation name but also the previous and next state.

You can download the code at this stage by typing:

git checkout step-6_vuex-built-in-logger