Vuex 插件

Vuex 的 store 接收 plugins 選項(xiàng)，這個(gè)選項(xiàng)暴露出每個(gè) mutation 的鉤子。一個(gè) Vuex 的插件就是一個(gè)簡(jiǎn)單的方法，接收 store 作為唯一參數(shù)：

const myPlugin = store => {
 // 當(dāng) store 在被初始化完成時(shí)被調(diào)用
 store.subscribe((mutation, state) => {
   // mutation 之后被調(diào)用
   // mutation 的格式為 {type, payload}。
 })
}

然后像這樣使用：

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

在插件內(nèi)提交 Mutations

插件不能直接修改狀態(tài) - 這就像你的組件，它們只能被 mutations 來觸發(fā)改變。

通過提交 mutations，插件可以用來同步數(shù)據(jù)源到 store。例如， 為了同步 websocket 數(shù)據(jù)源到 store (這只是為說明用法的例子，在實(shí)際中，createPlugin 方法會(huì)附加更多的可選項(xiàng)，來完成復(fù)雜的任務(wù))。

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]
})

生成狀態(tài)快照

有時(shí)候插件想獲取狀態(tài) “快照” 和狀態(tài)的改變前后的變化。為了實(shí)現(xiàn)這些功能，需要對(duì)狀態(tài)對(duì)象進(jìn)行深拷貝：

const myPluginWithSnapshot = store => {
 let prevState = _.cloneDeep(store.state)
 store.subscribe((mutation, state) => {
   let nextState = _.cloneDeep(state)
   // 對(duì)比 prevState 和 nextState...
   // 保存狀態(tài)，用于下一次 mutation
   prevState = nextState
 })
}

** 生成狀態(tài)快照的插件只能在開發(fā)階段使用，使用 Webpack 或 Browserify，讓構(gòu)建工具幫我們處理：

const store = new Vuex.Store({
 // ...
 plugins: process.env.NODE_ENV !== 'production'
   ? [myPluginWithSnapshot]
   : []
})

插件默認(rèn)會(huì)被起用。為了發(fā)布產(chǎn)品，你需要用 Webpack 的 DefinePlugin 或者 Browserify 的 envify 來轉(zhuǎn)換 process.env.NODE_ENV !== 'production' 的值為 false。

內(nèi)置 Logger 插件

如果你正在使用 vue-devtools，你可能不需要。

Vuex 帶來一個(gè)日志插件用于一般的調(diào)試:

import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
 plugins: [createLogger()]
})

createLogger 方法有幾個(gè)配置項(xiàng)：

const logger = createLogger({
 collapsed: false, // 自動(dòng)展開記錄 mutation
 transformer (state) {
   // 在記錄之前前進(jìn)行轉(zhuǎn)換
   // 例如，只返回指定的子樹
   return state.subTree
 },
 mutationTransformer (mutation) {
   // mutation 格式 { type, payload }
   // 我們可以按照想要的方式進(jìn)行格式化
   return mutation.type
 }
})

日志插件還可以直接通過 <script> 標(biāo)簽，然后它會(huì)提供全局方法 createVuexLogger 。

要注意，logger 插件會(huì)生成狀態(tài)快照，所以僅在開發(fā)環(huán)境使用。