The vuex logger is very easy to include as a plugin within your store using the createLogger() function. If you only want basic logging functionality, you can include it in your store as such:

1
2
3
4
5
6
7
8
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

const store = new Vuex.Store({
  plugins: [createLogger()]
 
  //... rest of your store setup
})

However, the awesome thing about the vuex logger is that it’s customizable.

You can pass an options objects to this logger in order to specify what gets logged and how it gets logged to the console.

Let’s take a look!

The createLogger function takes an object with the following functions and attributes:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  collapsed: <boolean>,
  filter (mutation, stateBefore, stateAfter) {
   
  },
  transformer (state) {

  },
  mutationTransformer (mutation) {
 
  },
  logger: <console implementation>
}

Let’s go through each of these individually.

1
collapsed: <boolean>,

The collapsed property needs to be a boolean. This boolean determines whether or not a log entry will be collapsed.

If true, the log entry will be collapsed.

If false, the log entry will be expanded.

Logs are collapsed by default.

1
filter (mutation, stateBefore, stateAfter)

The filter function allows you to literally “filter” mutations — meaning, you can decide which mutations you want to log or not log.

You have access to the mutation(an object with the two properties type and payload), the old state, and the new state.

If this function returns true, the mutation will be logged.

If false, it will be ignored.

1
transformer (state)

The transformer function is where you can “transform” the state before logging it. This means that if you only want to return to a specific subtree of the state, or perhaps parse the state into a more readable/informative format, you can do that.

This function should return the modified version of the state that you want to be logged.

1
mutationTransformer (mutation)

This is similar to the transformer function — the only difference being that you are “transforming” the mutation, not the state.

The mutation object has the two properties type and payload, just like in the filter function.

The mutationTransformer function should return the modified version of the state that you want to be logged.

1
logger: console

The logger property takes an implementation of the console api. The default is the javascript console object.

Now that I’ve explained the options you can provide to the plugin, let’s take a look at quick example of each function so you can get a sense of what you can do with a custom logger.

The following example uses the shopping cart application included in the official vuex github repository.

1
2
3
4
  filter (mutation, stateBefore, stateAfter) {
    const blacklist = ['cart/setCheckoutStatus']
    return !blacklist.includes(mutation.type)
  },

This filter function checks if a mutation is in the blacklist array. If it is, it will be ignored.

1
2
3
4
5
6
7
8
9
  // omit cart from state if cart contains no objects
  transformer (state) {
    const { cart: currentCart } = state
    if (currentCart.items.length === 0) {
      const { cart, ...transformedState } = state
      return transformedState
    }
    return state
  },

This transformer function will first check if the cart is empty.

If it is empty, the function will return a new copy of the state with the cart omitted.

Otherwise it will just return the full state.

1
2
3
4
5
6
7
8
9
10
11
  mutationTransformer (mutation) {
    // add an emoji to the mutation for some flare
    const emojis = {
      'cart': '🛒',
      'products': '🤤'
    }
    const { type, payload } = mutation
    const moduleName = extractModuleName(type)
    const emoji = emojis[moduleName]
    return `${emoji} ${type}, ${payload}`
  },

This mutationTransformer function maps an emoji to each store module.

It will then extract the module name, look up the proper emoji, and return the string representation of the mutation including the emoji.

Isn’t that awesome?

Here’s what it looks like:

You can take a look at the full code here

As you can see, there’s a lot you can do to customize the vuex logger. If you so desire, you can even add awesome emojis like in the above example.

Feel free to go off and customize your logger to your heart’s content.