• 插件
    • Logger 插件
    • 总结

    插件

    Vuex 除了提供的存取能力，还提供了一种插件能力，让我们可以监控 store 的变化过程来做一些事情。

    Vuex 的 store 接受 plugins 选项，我们在实例化 Store 的时候可以传入插件，它是一个数组，然后在执行 Store 构造函数的时候，会执行这些插件：

    1. const {
    2.   plugins = [],
    3.   strict = false
    4. } = options
    5. // apply plugins
    6. plugins.forEach(plugin => plugin(this))

    在我们实际项目中，我们用到的最多的就是 Vuex 内置的 Logger 插件，它能够帮我们追踪 state 变化，然后输出一些格式化日志。下面我们就来分析这个插件的实现。

    Logger 插件

    Logger 插件的定义在 src/plugins/logger.js 中：

    1. export default function createLogger ({
    2.   collapsed = true,
    3.   filter = (mutation, stateBefore, stateAfter) => true,
    4.   transformer = state => state,
    5.   mutationTransformer = mut => mut,
    6.   logger = console
    7. } = {}) {
    8.   return store => {
    9.     let prevState = deepCopy(store.state)
    11.     store.subscribe((mutation, state) => {
    12.       if (typeof logger === 'undefined') {
    13.         return
    14.       }
    15.       const nextState = deepCopy(state)
    17.       if (filter(mutation, prevState, nextState)) {
    18.         const time = new Date()
    19.         const formattedTime = ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
    20.         const formattedMutation = mutationTransformer(mutation)
    21.         const message = `mutation ${mutation.type}${formattedTime}`
    22.         const startMessage = collapsed
    23.           ? logger.groupCollapsed
    24.           : logger.group
    26.         // render
    27.         try {
    28.           startMessage.call(logger, message)
    29.         } catch (e) {
    30.           console.log(message)
    31.         }
    33.         logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))
    34.         logger.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation)
    35.         logger.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState))
    37.         try {
    38.           logger.groupEnd()
    39.         } catch (e) {
    40.           logger.log('—— log end ——')
    41.         }
    42.       }
    44.       prevState = nextState
    45.     })
    46.   }
    47. }
    49. function repeat (str, times) {
    50.   return (new Array(times + 1)).join(str)
    51. }
    53. function pad (num, maxLength) {
    54.   return repeat('0', maxLength - num.toString().length) + num
    55. }

    插件函数接收的参数是 store 实例，它执行了 store.subscribe 方法，先来看一下 subscribe 的定义：

    1. subscribe (fn) {
    2.   return genericSubscribe(fn, this._subscribers)
    3. }
    5. function genericSubscribe (fn, subs) {
    6.   if (subs.indexOf(fn) < 0) {
    7.     subs.push(fn)
    8.   }
    9.   return () => {
    10.     const i = subs.indexOf(fn)
    11.     if (i > -1) {
    12.       subs.splice(i, 1)
    13.     }
    14.   }
    15. }

    subscribe 的逻辑很简单，就是往 this._subscribers 去添加一个函数，并返回一个 unsubscribe 的方法。

    而我们在执行 store.commit 的方法的时候，会遍历 this._subscribers 执行它们对应的回调函数：

    1. commit (_type, _payload, _options) {
    2.   const {
    3.     type,
    4.     payload,
    5.     options
    6.   } = unifyObjectStyle(_type, _payload, _options)
    8.   const mutation = { type, payload }
    9.   // ...
    10.   this._subscribers.forEach(sub => sub(mutation, this.state))  
    11. }

    回到我们的 Logger 函数，它相当于订阅了 mutation 的提交，它的 prevState 表示之前的 state，nextState 表示提交 mutation 后的 state，这两个 state 都需要执行 deepCopy 方法拷贝一份对象的副本，这样对他们的修改就不会影响原始 store.state。

    接下来就构造一些格式化的消息，打印出一些时间消息 message， 之前的状态 prevState，对应的 mutation 操作 formattedMutation 以及下一个状态 nextState。

    最后更新 prevState = nextState，为下一次提交 mutation 输出日志做准备。

    总结

    那么至此 Vuex 的插件分析就结束了，Vuex 从设计上支持了插件，让我们很好地从外部追踪 store 内部的变化，Logger 插件在我们的开发阶段也提供了很好地指引作用。当然我们也可以自己去实现 Vuex 的插件，来帮助我们实现一些特定的需求。

    原文: https://ustbhuangyi.github.io/vue-analysis/vuex/plugin.html