插件

在 Scrimba 上尝试这节课

Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数：

  1. const myPlugin = store => {
  2.   // 当 store 初始化后调用
  3.   store.subscribe((mutation, state) => {
  4.     // 每次 mutation 之后调用
  5.     // mutation 的格式为 { type, payload }
  6.   })
  7. }

然后像这样使用：

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

在插件内提交 Mutation

在插件中不允许直接修改状态——类似于组件，只能通过提交 mutation 来触发变化。

通过提交 mutation，插件可以用来同步数据源到 store。例如，同步 websocket 数据源到 store（下面是个大概例子，实际上 createPlugin 方法可以有更多选项来完成复杂任务）：

  1. export default function createWebSocketPlugin (socket) {
  2.   return store => {
  3.     socket.on('data', data => {
  4.       store.commit('receiveData', data)
  5.     })
  6.     store.subscribe(mutation => {
  7.       if (mutation.type === 'UPDATE_DATA') {
  8.         socket.emit('update', mutation.payload)
  9.       }
  10.     })
  11.   }
  12. }
  1. const plugin = createWebSocketPlugin(socket)
  3. const store = new Vuex.Store({
  4.   state,
  5.   mutations,
  6.   plugins: [plugin]
  7. })

生成 State 快照

有时候插件需要获得状态的“快照”，比较改变的前后状态。想要实现这项功能，你需要对状态对象进行深拷贝：

  1. const myPluginWithSnapshot = store => {
  2.   let prevState = _.cloneDeep(store.state)
  3.   store.subscribe((mutation, state) => {
  4.     let nextState = _.cloneDeep(state)
  6.     // 比较 prevState 和 nextState...
  8.     // 保存状态，用于下一次 mutation
  9.     prevState = nextState
  10.   })
  11. }

生成状态快照的插件应该只在开发阶段使用，使用 webpack 或 Browserify，让构建工具帮我们处理：

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

上面插件会默认启用。在发布阶段，你需要使用 webpack 的 DefinePlugin插件 - 图1 (opens new window) 或者是 Browserify 的 envify插件 - 图2 (opens new window) 使 process.env.NODE_ENV !== 'production' 为 false。

内置 Logger 插件

如果正在使用 vue-devtools插件 - 图3 (opens new window)，你可能不需要此插件。

Vuex 自带一个日志插件用于一般的调试:

  1. import createLogger from 'vuex/dist/logger'
  3. const store = new Vuex.Store({
  4.   plugins: [createLogger()]
  5. })

createLogger 函数有几个配置项：

  1. const logger = createLogger({
  2.   collapsed: false, // 自动展开记录的 mutation
  3.   filter (mutation, stateBefore, stateAfter) {
  4.     // 若 mutation 需要被记录，就让它返回 true 即可
  5.     // 顺便，`mutation` 是个 { type, payload } 对象
  6.     return mutation.type !== "aBlocklistedMutation"
  7.   },
  8.   actionFilter (action, state) {
  9.     // 和 `filter` 一样，但是是针对 action 的
  10.     // `action` 的格式是 `{ type, payload }`
  11.     return action.type !== "aBlocklistedAction"
  12.   },
  13.   transformer (state) {
  14.     // 在开始记录之前转换状态
  15.     // 例如，只返回指定的子树
  16.     return state.subTree
  17.   },
  18.   mutationTransformer (mutation) {
  19.     // mutation 按照 { type, payload } 格式记录
  20.     // 我们可以按任意方式格式化
  21.     return mutation.type
  22.   },
  23.   actionTransformer (action) {
  24.     // 和 `mutationTransformer` 一样，但是是针对 action 的
  25.     return action.type
  26.   },
  27.   logActions: true, // 记录 action 日志
  28.   logMutations: true, // 记录 mutation 日志
  29.   logger: console, // 自定义 console 实现，默认为 `console`
  30. })

日志插件还可以直接通过 <script> 标签引入，它会提供全局方法 createVuexLogger。

要注意，logger 插件会生成状态快照，所以仅在开发环境使用。