Vuex資料頁面重新整理丟失問題解決方案

用Vue做專案開發很久了，對於vuex能用、會用，但是因為狀態脫離頁面和重新整理丟失兩個原因，一直都有種牴觸，特別是一些簡單的資料都是透過query或者本地儲存就解決了，然而對於一些複雜內容，不可避免的還是要使用Vuex去處理(真香)，但是重新整理丟失的問題，的確叫人頭大。最近閒下來，我們來研究下怎麼幹掉這個問題～

---

不大瞭解Vuex的同學，可以

---

由於Vuex的資料是儲存在記憶體中的，相當於memory cache，當頁面重新整理的時候記憶體被清空過載新內容，原來的資料就丟了，為了解決這個我們可以藉助瀏覽器的本地儲存來解決，此時我們有兩個選擇

• localStorage 真·持久儲存

• sessionStorage 會話期儲存

相比之下localStorage太持久了，不主動清除都會一直在，而sessionStorage更符合Vuex會話期狀態管理的設計初衷。因此下文中統一使用sessionStorage來做補充，解決問題。

有了補充物件之後，我們要做的只有兩點
1、每次在mutation中set state的時候，同步的塞到sessionStorage一份
2、狀態初始化的時候，從sessionStorage中讀取相應內容並作為預設值(存在的話)

看起來很簡單，於是第一版方案有了，

export default new Vuex.Store({    state: {        userLevel: sessionStorage.getItem('userLevel') || ''
    },    mutations: {
        SET_USERLEVEL(state, userLevel) {
            sessionStorage.setItem('userLevel', userLevel)
            state.userLevel = userLevel
        }
    },    modules: {
    }
})

這個是解決問題了，但是每個mutation都要sessionStorage.setItem一下實在有點麻煩，而且初始化還要都getItem一遍，我很懶不想寫。。。於是我們改進了第二版

const storeMaker = (state) => {    // 初始化
    Object.keys(state).map((key) => {        // 判斷型別獲取本地儲存資料
        if (typeof state[key] === 'object') {            if (sessionStorage.getItem(key) && JSON.parse(sessionStorage.getItem(key))) {
                state[key] = JSON.parse(sessionStorage.getItem(key))
            }
        } else if (typeof state[key] === 'number') {            if (sessionStorage.getItem(key) && parseInt(sessionStorage.getItem(key))) {
                state[key] = parseInt(sessionStorage.getItem(key))
            }
        } else {            if (sessionStorage.getItem(key)) {
                state[key] = sessionStorage.getItem(key)
            }
        }
    })    // 重寫set處理
    return new Proxy(state, {        set: function(target, key, value) {            let temp = value            if (typeof temp === 'object') {
                temp = JSON.stringify(temp)
            }

            sessionStorage.setItem(key, temp)            return Reflect.set(target, key, value)
        }
    })
}export default new Vuex.Store({    state: storeMaker({        userLevel: ''
    }),    mutations: {
        SET_USERLEVEL(state, userLevel) {
            state.userLevel = userLevel
        }
    },    modules: {
    }
})

內容不多，主要定義了一個storeMaker的函式實現了兩個功能
1、對傳入的state初始值判斷型別，並嘗試從sessionStorage中讀取資料替換預設值
2、透過Proxy重置state的set邏輯，新增同步儲存到sessionStorage的邏輯

其實本來可以透過Proxy重置get邏輯處理取值的問題，但是由於vuex本身透過defineProperty函式重置了get邏輯，在這裡使用proxy覆蓋會有衝突，因此在初始化的時候直接讀取sessionStorage。

同時也存在一些問題：
1、目前只處理了一級屬性，二級以下屬性沒處理，對於初始化會有偏差。對於這點處理層級也不宜過深，因為過深的結構設計本來就並不合理，兩層基本也足夠了。基本處理就是對於state的每個key再去遍歷一遍，如果是object(非null非陣列非空物件)就重新proxy一下
2、可以嘗試打包成npm包，或者寫成Vuex的外掛形式，方便使用
3、等等

～狀態不好，先寫到這，大家有興趣一起來討論，清清腦子再來補充～

聯想到的一些點：
1、memory cache和disk cache？記憶體怎麼清理？js垃圾回收機制？
2、SessionStorage怎麼做到會話期快取？
3、session機制怎麼回事？
4、http的無狀態？狀態保持？客戶端保持？服務端保持？
5、等等等等
發散開看看，一個地方真的能學到很多東西。。。

原文出處：https://www.cnblogs.com/heioray/p/10284268.html 、

作者：