vuex頁面刷新數據丟失的解決辦法

在vue項目中用vuex來作全局的狀態管理， 發現當刷新網頁後，保存在vuex實例store裏的數據會丟失。

緣由：

由於store裏的數據是保存在運行內存中的,當頁面刷新時，頁面會從新加載vue實例，store裏面的數據就會被從新賦值初始化

解決思路：

將state的數據保存在localstorage、sessionstorage或cookie中（三者的區別），這樣便可保證頁面刷新數據不丟失且易於讀取。

1. localStorage: localStorage的生命週期是永久的，關閉頁面或瀏覽器以後localStorage中的數據也不會消失。localStorage除非主動刪除數據，不然數據永遠不會消失。
2. sessionStorage:sessionStorage的生命週期是在僅在當前會話下有效。sessionStorage引入了一個「瀏覽器窗口」的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即便刷新頁面或者進入同源另外一個頁面，數據依然存在。可是sessionStorage在關閉了瀏覽器窗口後就會被銷燬。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不同的。
3. cookie:cookie生命期爲只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。 存放數據大小爲4K左右,有個數限制（各瀏覽器不一樣），通常不能超過20個。缺點是不能儲存大數據且不易讀取。

因爲vue是單頁面應用，操做都是在一個頁面跳轉路由，所以sessionStorage較爲合適,緣由以下：

1. sessionStorage能夠保證打開頁面時sessionStorage的數據爲空；
2. 每次打開頁面localStorage存儲着上一次打開頁面的數據，所以須要清空以前的數據。

vuex中state數據的修改必須經過mutation方法進行修改，所以mutation修改state的同時須要修改sessionstorage,問題卻是能夠解決可是感受很麻煩，state中有不少數據，不少mutation修改state就要不少次sessionstorage進行修改，既然如此直接用sessionstorage解決不就好了，爲什麼還要用vuex畫蛇添足呢？ vuex的數據在每次頁面刷新時丟失，是否能夠在頁面刷新前再將數據存儲到sessionstorage中呢，是能夠的，beforeunload事件能夠在頁面刷新前觸發，可是在每一個頁面中監聽beforeunload事件感受也不太合適，那麼最好的監聽該事件的地方就在app.vue中。

1. 在app.vue的created方法中讀取sessionstorage中的數據存儲在store中，此時用vuex.store的replaceState方法，替換store的根狀態
2. 在beforeunload方法中將store.state存儲到sessionstorage中。

代碼以下：

export default {
  name: 'App',
  created () {
    //在頁面加載時讀取sessionStorage裏的狀態信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在頁面刷新時將vuex裏的信息保存到sessionStorage裏
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}
複製代碼