解決vuex頁面刷新導致數據丟失問題

      vuex是大家使用vue時大多數都會選擇的，但是當頁面刷新之后vuex數據會丟失，因為頁面刷新之后代碼重新加載這樣vuex的數據自然就會為空。怎么解決這個問題呢？vuex自身好像沒有太好的解決方案,但是我們可以利用localStorage和sessionStorage對數據進行保存。這樣這個問題就解決了。這個方法比較簡單但是其實這樣做就和vuex沒有太大的關系了，我們可以將數據存在localStorage中為什么還要用vuex呢？所以這種方法可用但是不建議,那么還有什么解決方案呢？ 其實網上也有很多解決這個問題的三方組件,例如 vuex-along。

　　vuex-along的實質也是將vuex中的數據存放到localStorage或者sessionStroage中，只不過這個存取過程這個組件會幫我們完成,我們只需要用vuex的讀取數據方式操作就可以了,簡單了解一下vuex-along的使用方法。

　　安裝vuex-along: 

npm install vuex-along --save

　　配置vuex-along: 在store/index.js 中最后添加以下代碼:

import VueXAlong from 'vuex-along'

plugins: [VueXAlong({
    name: 'along',     //存放在localStroage或者sessionStroage 中的名字
    local: false,      //是否存放在local中  false 不存放 如果存放按照下面session的配置配
    session: { list: [], isFilter: true } //如果值不為false 那么可以傳遞對象 其中 當isFilter設置為true時， list 數組中的值就會被過濾調,這些值不會存放在seesion或者local中
  })]

　　上面配置之后就可以正常使用vuex了，頁面刷新數據也不會丟失了。

　　當然這種問題的解決方案很多,但是大多數都要借助seesion或local的幫助，如果不使用組件的化,可以在頁面刷新之前將vuex的數據存放在seesion或local中, 刷新事件(beforeunload) 。