vuex配sessionStorage進行自動儲存，解決重新整理資料丟失的問題。

最近在重構以前的老程式碼，發現上一個前端都是直接用sessionStorage.setItem做的資料儲存，對於Vuex也沒有做一個持久化的儲存，重新整理就沒了。

於是我對這個重新做了一個處理。
大致是這麼想的，

第一點：我想每次修改store裡面的資料的時候，sessionStorage就自動儲存更新一遍，而不是我手動去更新sessionStroage裡面的資料。

我的做法是：使用vuex的 subscribe 訂閱。

因為要修改store裡面的資料，會呼叫到mutation 。而subscribe是訂閱 store 的 mutation。handler 會在每個 mutation 完成後呼叫，接收 mutation 和經過 mutation 後的狀態作為引數：意味著我每次呼叫mutaion它就會執行一次，那麼在我資料狀態不多的情況下，我可以簡單粗暴的使用這個方法，每呼叫一次mutaion我就做一次session的更新。

在vuex的index.js介面：

store.subscribe((mutations, state) => {
    sessionStorage.setItem('XXXXX', JSON.stringify(state))
})

你可以做多個儲存名字，每次只儲存你想儲存的部分。

第二點：我希望我重新整理頁面之後，我vuex的資料不會丟失。

vuex 是沒有持久化儲存的，重新整理之後需要重新從sessionStorage裡面獲取資料，所以我們需要監聽頁面重新整理這一個動作，來達到重新整理的時候,vuex裡面的能自動獲取sessionStorage裡面的資料重新給自己賦值一遍。

// 為了防止重新整理時vuex的資料丟失
    if (sessionStorage.getItem("XXXXX") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("XXXXX"))))
    } 
    //在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡
    // pagehide為了相容ios
    window.addEventListener("pagehide",()=>{
        sessionStorage.setItem("XXXXX",JSON.stringify(this.$store.getters))
    })

就可以了