插件

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

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

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

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

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

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

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

总结

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