Плагины

Попробуйте этот урок на Scrimba

Хранилища Vuex принимают параметр plugins , который предоставляет хуки для каждой мутации. Плагин Vuex — это просто функция, которая получает хранилище в качестве единственного аргумента:

const myPlugin = store => {
  // called when the store is initialized
  store.subscribe((mutation, state) => {
    // called after every mutation.
    // The mutation comes in the format of `{ type, payload }`.
  })
}

И может быть использован так:

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

Применение мутаций внутри плагинов

Плагины не могут напрямую изменять состояние — подобно компонентам, они могут только вызывать изменения, применяя мутации.

Применяя мутации, плагин может использоваться для синхронизации источника данных с хранилищем. Например, для синхронизации источника данных WebSocket с хранилищем (это просто искусственный пример, на самом деле функция createWebSocketPlugin может принимать дополнительные параметры для более сложных задач):

export default function createWebSocketPlugin (socket) {
  return store => {
    socket.on('data', data => {
      store.commit('receiveData', data)
    })
    store.subscribe(mutation => {
      if (mutation.type === 'UPDATE_DATA') {
        socket.emit('update', mutation.payload)
      }
    })
  }
}

const plugin = createWebSocketPlugin(socket)

const store = new Vuex.Store({
  state,
  mutations,
  plugins: [plugin]
})

Создание снимков состояния

Иногда плагин может захотеть получить «снимки» состояния и также сравнить состояние после мутации со состоянием до мутации. Для этого вам необходимо выполнить глубокую копию объекта состояния:

const myPluginWithSnapshot = store => {
  let prevState = _.cloneDeep(store.state)
  store.subscribe((mutation, state) => {
    let nextState = _.cloneDeep(state)

    // compare `prevState` and `nextState`...

    // save state for next mutation
    prevState = nextState
  })
}

Плагины, которые создают снимки состояния, должны использоваться только во время разработки. При использовании webpack или Browserify, мы можем позволить нашим инструментам сборки это сделать за нас:

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

Плагин будет использоваться по умолчанию. Для производства вам понадобится DefinePlugin (opens new window) для webpack или envify (opens new window) для Browserify, чтобы преобразовать значение process.env.NODE_ENV !== 'production' в false для окончательной сборки.

Встроенный плагин регистрации

Если вы используете vue-devtools (opens new window), вам, вероятно, это не нужно.

Vuex поставляется с плагином регистрации для общего использования при отладке:

import { createLogger } from 'vuex'

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

ПРЕДУПРЕЖДЕНИЕ

До версии v3.5.0 функция createLogger экспортировалась в vuex/dist/logger пакет. Пожалуйста, ознакомьтесь с разделом «До Vuex v3.5.0» на этой странице.

Функция createLogger принимает несколько параметров:

const logger = createLogger({
  collapsed: false, // auto-expand logged mutations
  filter (mutation, stateBefore, stateAfter) {
    // returns `true` if a mutation should be logged
    // `mutation` is a `{ type, payload }`
    return mutation.type !== "aBlocklistedMutation"
  },
  actionFilter (action, state) {
    // same as `filter` but for actions
    // `action` is a `{ type, payload }`
    return action.type !== "aBlocklistedAction"
  },
  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 any way we want.
    return mutation.type
  },
  actionTransformer (action) {
    // Same as mutationTransformer but for actions
    return action.type
  },
  logActions: true, // Log Actions
  logMutations: true, // Log mutations
  logger: console, // implementation of the `console` API, default `console`
})

Файл регистрации также может быть включён напрямую через тег <script>, и он экспортирует функцию createVuexLogger глобально.

Обратите внимание, что плагин регистрации создаёт снимки состояния, поэтому используйте его только во время разработки.

До Vuex v3.5.0

До версии v3.5.0 функция createLogger экспортировалась в vuex/dist/logger пакет.

import createLogger from 'vuex/dist/logger'

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

← Структура приложения Строгий режим →