vuex/docs/pt/middlewares.md

Middlewares

Os armazéns Vuex aceitam a opção middlewares que expõem hooks para cada mutação (Note que isso é completamente não relacionado aos middlewares Redux). Um middleware Vuex é simplesmente um objeto que implementam algumas funções de hook:

const myMiddleware = {
  onInit (state, store) {
    // estado inicial do registro
  },
  onMutation (mutation, state, store) {
    // chamado após todas mutações
    // A mutação vem no formato { type, payload }
  }
}

E também pode ser utilizado assim:

const store = new Vuex.Store({
  // ...
  middlewares: [myMiddleware]
})

Por padrão, um middleware recebe o objeto state real. Um middleware também pode receber o armazém (store) para disparar mutações. Como os middlewares são primariamente utilizados para debug da sua aplicação ou persistência de dados, eles não podem modificar o estado

Algumas vezes um middleware pode querer receber "snapshots" do estado, e também comparar o estádo pós-mutação com o pré-mutação. Esses middlewares precisam declarar a opção snapshot: true:

const myMiddlewareWithSnapshot = {
  snapshot: true,
  onMutation (mutation, nextState, prevState, store) {
    // nextState and prevState are deep-cloned snapshots
    // of the state before and after the mutation.
  }
}

Middlwares que fazem snapshots devem apenas serem utilizados durante desenvolvimento Quando você estiver utilizando Webpack ou o Browserify, você pode deixar que essas ferramentas cuidem disso para você:

const store = new Vuex.Store({
  // ...
  middlewares: process.env.NODE_ENV !== 'production'
    ? [myMiddlewareWithSnapshot]
    : []
})

O middleware será utilizado por padrão. Para produção, utilize a build descrita aqui para converter o valor de process.env.NODE_ENV !== 'production' para false na build final.

Middleware de Log Padrão

O Vuex já vem com um middleware de log para o uso geral de debug:

import createLogger from 'vuex/logger'

const store = new Vuex.Store({
  middlewares: [createLogger()]
})

A função createLogger recebe alguns parâmetros:

const logger = createLogger({
  collapsed: false, // auto-expand logged mutations
  transformer (state) {
    // transform the state before logging it.
    // for example return only a specific sub-tree
    return state.subTree
  },
  mutationTransformer (mutation) {
    // mutations are logged in the format of { type, payload }
    // we can format it anyway we want.
    return mutation.type
  }
})

Note que o middleware logger faz snapshots do estado, então utilize-o apenas para desenvolvimento.