const myPlugin = store => { // 当 store 初始化后调用 store.subscribe((mutation, state) => { // 每次 mutation 之后调用 // mutation 的格式为 { type, payload } }) }
然后像这样使用：
const store = new Vuex.Store({ // ... plugins: [myPlugin] })
在插件中提交Mutation在插件中不允许直接修改状态——类似于组件，只能通过提交 mutation 来触发变化。
通过提交 mutation，插件可以用来同步数据源到 store。例如，同步 websocket 数据源到 store（下面是个大概例子，实际上 createPlugin 方法可以有更多选项来完成复杂任务）：
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] })
生成State快照有时候插件需要获得状态的“快照”，比较改变的前后状态。想要实现这项功能，需要对状态对象进行深拷贝：
const myPluginWithSnapshot = store => { let prevState = _.cloneDeep(store.state) store.subscribe((mutation, state) => { let nextState = _.cloneDeep(state) // 比较 prevState 和 nextState... // 保存状态，用于下一次 mutation prevState = nextState }) }
生成状态快照的插件应该只在开发阶段使用，使用 webpack 或 Browserify，让构建工具帮助处理：
const store = new Vuex.Store({ // ... plugins: process.env.NODE_ENV !== 'production' ? [myPluginWithSnapshot] : [] })
上面插件会默认启用。在发布阶段，需要使用 webpack 的 DefinePlugin 或者是 Browserify 的 envify 使 process.env.NODE_ENV !== 'production' 为 false
内置Logger插件Vuex 自带一个日志插件用于一般的调试:
import createLogger from 'vuex/dist/logger' const store = new Vuex.Store({ plugins: [createLogger()] }) createLogger 函数有几个配置项： const logger = createLogger({ collapsed: false, // 自动展开记录的 mutation filter (mutation, stateBefore, stateAfter) { // 若 mutation 需要被记录，就让它返回 true 即可 // 顺便，`mutation` 是个 { type, payload } 对象 return mutation.type !== "aBlacklistedMutation" }, transformer (state) { // 在开始记录之前转换状态 // 例如，只返回指定的子树 return state.subTree }, mutationTransformer (mutation) { // mutation 按照 { type, payload } 格式记录 // 我们可以按任意方式格式化 return mutation.type } })
日志插件还可以直接通过 <script> 标签引入，它会提供全局方法 createVuexLogger。
要注意，logger 插件会生成状态快照，所以仅在开发环境使用
严格模式开启严格模式，仅需在创建 store 的时候传入 strict: true
const store = new Vuex.Store({ // ... strict: true })