vuex進階篇 -- plugins和嚴格模式

前言

以前的基礎篇裏面咱們學習過了vuex基礎的內容，今天咱們來昇華一下。

---

plugins

插件其實就是vuex的一些與設定的初始化時期運行的內容，因此咱們能夠知道plugins是一個函數內容，其中的第一個參數內容是store對象內容，方便插件對於store對象的調用。同時咱們能夠經過store之中的subscribe方法，這個方法註冊了一個mutation的後置處理切面（感受像是截胡）。此方法須要傳遞一個函數做爲參數，這個函數之中有兩個參數內容分別是mutation對象和state對象。其中mutation對象的格式是{type, payload}，state則是修改完成以後的state內容。先看一個簡單的插件內容吧

export default (store) => {
    console.log(store);
    store.subscribe((mutation, state) => {
        console.log(mutations);
        console.log(state)
    })
}
複製代碼

這樣在vuex初始化的時候在控制檯打印store的內容，而後在咱們每次提交mutation的時候將會在控制檯打印mutation和state的數據內容。編寫好插件以後，咱們能夠經過在store的管理對象中添加plugins關鍵字，傳遞一個數組的方式來引用插件。

接下來咱們說一說插件的幾種巡查使用：

1.有的時候咱們須要作改變先後的state的比對，咱們能夠經過插件來進行，簡化代碼以下：

(store) => {
    let preState = _deepClone(store.state);
    store.subscribe((mutation, state) => {
        let nextState = _deepClone(state);
        ...
        preState = nextState
    })
}
複製代碼

經過存儲state內容的快照信息，咱們將能夠比對內容變動，依據變動來實現部分邏輯。

2.常常咱們須要存儲號咱們的vuex數據，由於vue的頁面展現變動時不以頁面刷新來進行的，若是用戶習慣性的點擊刷新按鍵，沒有存儲當前vuex之中的數據的時候會致使數據的從新初始化，這樣將會嚴重的影響當前用戶的使用體驗的。這個時候數據緩存的工做實際上就能夠交由plugin來作了，這裏上一段簡單的緩存代碼：

(store) => {
    if(localStorage.state) store.replaceState(JSON.parse(state))
    store.subscribe((mutation, state) => {
        localStorage.state = JSON.stringify(state);
    )
}
複製代碼

這樣咱們就能夠很無缺的保存當前數據內容的形式了，方便以後用戶的刷新和使用。

3.使用插件來進行日誌的記錄。數據展現的改變須要依據狀態的改變，狀態的改變須要經過mutation的操做，而mutation的操做以後就是咱們記錄日誌的時候，因此也是經常使用的功能之一。固然咱們的vuex已經有自帶的createLogger日誌插件了，若是你使用vue-devtool徹底能夠不用這一插件了。createLogger的使用能夠查看一下vuex官網的相關部分（點擊這裏），這裏我就不細說了。

固然上面說起的三種只是不多量的部分，咱們可使用的方式實際上仍是有不少的，有待於每個開發人員去發現和想象。

---

嚴格模式

嚴格模式須要在根狀態管理對象上面添加strict:true的設置。這樣咱們須要嚴格的按照vuex的狀態修改過程進行狀態的修改，再使用直接狀態變量賦值的形式來修改的話將會報錯。每一次的狀態修改都須要經過mutation來進行實現。固然這個模式只是爲了讓咱們的代碼更加的嚴謹，再生產環境下，咱們不望有相關的錯誤展現，則會關閉掉嚴格模式。因此咱們通常再代碼之中進行設置的時候會設置成以下形式：

strict: process.env.NODE_ENV === "development"
複製代碼

這樣再打包成爲product環境下的時候，咱們能夠不用再對代碼作出修改了。

固然再咱們使用嚴格模式的時候有一些狀況下，語法糖將會再也不便利。例如v-model。這以後將不能再直接和state以內的狀態有任何的直接的關聯關係，咱們須要經過綁定值和事件的形式，或者經過setter和getter來進行內容的綁定使用。由於直接使用關聯的話，v-model作的事情實際上時直接賦值，這樣的再嚴格模式下是不容許的。

---

結束：

vuex的基礎學習到這一片就已經所有的結束了，以後的的源碼閱讀和使用記錄將會陸續的推出，共同窗習共同進步，下篇文章再見，拜拜。