插件

本节目标：理解“插件”的核心思路，并能把它用于实际开发或面试表达。 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]})

在插件内提交 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。

插件 ​

插件