一，前言

上一篇，主要介紹了 Vuex-namespaced 命名空間的實現(xiàn)，主要涉及以下幾個點：

• 命名空間的介紹和使用；
• 命名空間的邏輯分析與代碼實現(xiàn)；
• 命名空間核心流程梳理；

本篇，繼續(xù)介紹 Vuex 插件機(jī)制的實現(xiàn)；

---

二，Vuex 插件使用介紹

1，Vuex 插件使用

Vuex 不僅提供了全局狀態(tài)管理能力，還進(jìn)一步提供了插件機(jī)制，便于開發(fā)者對 Vuex 插件進(jìn)行增強(qiáng)；

Vuex 插件的使用方式：通過 Store 類提供的 plugin 數(shù)組進(jìn)行 Vuex 插件注冊：

const store = new Vuex.Store({// plugins：注冊 vuex 插件plugins: [plugin1(),plugin2()]
});

備注：在 plugins 數(shù)組中可以注冊多個 Vuex 插件，插件的執(zhí)行是串行順序執(zhí)行的；

2，Vuex 內(nèi)置的 logger 日志插件

在 Vuex 插件中，內(nèi)置了 logger 日志插件：

// src/store/index.jsimport Vue from 'vue';
import Vuex from 'vuex';// 引入 Vuex 日志插件 logger
import logger from 'vuex/dist/logger'Vue.use(Vuex);const store = new Vuex.Store({plugins: [logger(),   // 日志插件：導(dǎo)出的 logger 是一個高階函數(shù)],
});
export default store;

備注：

• logger 為 Vuex 內(nèi)置插件，在 vuex 包中 dist 目錄下；
• logger 是一個高階函數(shù)，便于在使用插件時進(jìn)行傳參；

logger 插件的執(zhí)行效果：

為 Vuex 添加 logger 插件后，當(dāng)狀態(tài)發(fā)生變化時，控制臺將會輸出相關(guān)日志：

如圖所示，控制臺日志將輸出所觸發(fā)的事件類型、事件名稱、及事件執(zhí)行前后的狀態(tài)變化；

logger 插件的效果相當(dāng)于 AOP 面向切面編程，在事件觸發(fā)前后分別輸出了相關(guān)的日志；

這樣，通過開啟 Vuex 日志插件，增強(qiáng)了開發(fā)環(huán)境下的調(diào)試體驗，便于開發(fā)者快速定位狀態(tài)相關(guān)的問題；

---

三，Vuex 插件開發(fā)

1，vuex-persists 狀態(tài)持久化插件

在使用 Vuex 插件進(jìn)行狀態(tài)管理時，一定會遇到一個問題：當(dāng)頁面刷新時（如使用 F5 進(jìn)行刷新），將導(dǎo)致頁面狀態(tài)丟失；

為了解決這個問題，可以使用狀態(tài)持久化插件：vuex-persists；

2，vuex-persists 插件的實現(xiàn)

Vuex 插件的開發(fā)并不復(fù)雜：

1. 創(chuàng)建一個 Vuex 插件，最終導(dǎo)出一個高階函數(shù)（在 plugin 數(shù)組中進(jìn)行插件注冊）；
2. Vuex 的 Store 類提供的訂閱方法 store.subscribe：當(dāng) mutation 方法觸發(fā)時被執(zhí)行；
3. Vuex 的 Store 類提供的狀態(tài)替換方法 store.replaceState：能夠更新 Vuex 中的狀態(tài)；

基于 Vuex 提供的插件機(jī)制，vuex-persists 插件的實現(xiàn)邏輯如下：

1. 創(chuàng)建高階函數(shù) persists，當(dāng) vuex 初始化時通過 plugin 完成拆件的注冊和初始化操作；
2. 使用 store.subscribe 訂閱方法：當(dāng) mutation 方法觸發(fā)時，將當(dāng)前狀態(tài)保存到本地；
3. 當(dāng)頁面刷新時，狀態(tài)將會丟失，同時 Vuex 插件重新初始化，此時重新讀取本地狀態(tài)，并通過store.replaceState將本地狀態(tài)（即刷新丟失的狀態(tài)）替換到 Vuex 狀態(tài)，實現(xiàn)狀態(tài)的持久化效果；

備注：本地存儲可通過 persists 插件參數(shù)在外部配置：

• localstorage
• sessionstorage
• cookie；

代碼實現(xiàn)：

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);// vuex-persists 插件實現(xiàn)
function persists() {return function (store) {console.log("----- persists 插件執(zhí)行 -----")// 取出本地存儲的狀態(tài)let data = localStorage.getItem('VUEX:STATE');if (data) {console.log("----- 存在本地狀態(tài)，同步至 Vuex -----")// 如果存在，使用本地狀態(tài)替換 Vuex 中的狀態(tài)store.replaceState(JSON.parse(data));}// subscribe：由 vuex 提供的訂閱方法，當(dāng)觸發(fā) mutation 方法時被執(zhí)行;store.subscribe((mutation, state) => {console.log("----- 進(jìn)入 store.subscribe -----")localStorage.setItem('VUEX:STATE', JSON.stringify(state));})}
}const store = new Vuex.Store({plugins: [logger(),   // 日志插件:導(dǎo)出的 logger 是一個高階函數(shù)persists()  // 持久化插件:vuex-persists]
});export default store;

3，測試插件效果

1，啟動項目，控制臺輸出日志：完成 persists 插件初始化；

2，點擊按鈕更新狀態(tài)：

點擊按鈕，觸發(fā)根模塊 mutation 類型 changeNum 方法，按照插件注冊順序執(zhí)行 logger、persists 插件；

觸發(fā) subscribe 狀態(tài)變更事件訂閱的回調(diào)方法，將新狀態(tài)保存至本地存儲 localStorage，根模塊商品數(shù)量狀態(tài) num 由 10 更新為 15；

3，當(dāng)頁面刷新時：

若沒有持久化插件，會由于頁面刷新導(dǎo)致 Vuex 中的狀態(tài)丟失；

此時，當(dāng)頁面刷新時，persists 持久化插件在重新執(zhí)行初始化操作時，會讀取本地存儲中保存的狀態(tài)數(shù)據(jù)，即由于頁面刷新丟失的數(shù)據(jù)，并通過 store.replaceState 方法更新 Vuex 中的狀態(tài)，實現(xiàn)狀態(tài)的持久化效果；

這樣就實現(xiàn)了一個狀態(tài)持久化插件的雛形；

接下來，繼續(xù)實現(xiàn) Vuex 所提供的插件機(jī)制；

---

四，Vuex 插件機(jī)制分析

通過官方 Vuex 插件所提供的插件機(jī)制，創(chuàng)建并實現(xiàn)了一個簡易的 Vuex 插件；

Vuex 插件的實現(xiàn)，主要使用 Vuex 提供的以下方法：

• Vuex 插件的 plugins 數(shù)組，提供插件注冊功能；
• store.subscribe：狀態(tài)變更時的訂閱回調(diào)功能；
• store.replaceState：狀態(tài)替換功能；

下一篇，將根據(jù)以上分析，實現(xiàn) Vuex 的插件機(jī)制；

---

五，結(jié)尾

本篇，主要介紹了 Vuex 插件的開發(fā)，主要涉及以下幾個點：

• Vuex 插件的使用介紹；
• Vuex 插件開發(fā)和使用分析；
• Vuex 插件機(jī)制的分析；

下一篇，繼續(xù)介紹 Vuex 插件機(jī)制的實現(xiàn)；

---

維護(hù)日志

• 20211012
  • 由于新擴(kuò)充的 Vuex 插件機(jī)制源碼部分較多，故將 Vuex 插件部分拆分為兩篇文章：《Vuex 插件開發(fā)》和《Vuex 插件機(jī)制實現(xiàn)》；
  • 修改文章標(biāo)題和摘要；
  • 優(yōu)化文字描述與 md 排版格式；