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

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

然后像这样使用：

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

其实就是执行了 store.subscribe 方法，先来看一下 subscribe 的定义：

subscribe (fn) {
return genericSubscribe(fn, this._subscribers)
}

function genericSubscribe (fn, subs) {
if (subs.indexOf(fn) < 0) {
  subs.push(fn)
}
return () => {
  const i = subs.indexOf(fn)
  if (i > -1) {
    subs.splice(i, 1)
  }
}
}

subscribe 的逻辑很简单，就是往 this._subscribers 去添加一个函数，并返回一个 unsubscribe 的方法。
而我们在执行 store.commit 的方法的时候，会遍历 this._subscribers 执行它们对应的回调函数：

commit (_type, _payload, _options) {
  const {
    type,
    payload,
    options
  } = unifyObjectStyle(_type, _payload, _options)

  const mutation = { type, payload }
  // ...
  this._subscribers.forEach(sub => sub(mutation, this.state))  
}

总结：

Vuex插件就是执行store.subscribe方法，然后Store在commit的时候会遍历执行订阅者的回调函数，然后就可以获取到mutation和state的变化了。

然后所有的插件都是在mutation和state上的变化上去做一些事情。

返回目录