vue.jpeg

背景

用vue開發(fā)中大型應(yīng)用時候，我們通常都會使用vuex進行狀態(tài)管理，但由于vuex是將數(shù)據(jù)以js對象的形勢維護在內(nèi)存中，所以當頁面刷新時候，存在內(nèi)存中的vuex數(shù)據(jù)將會丟失，在很多場景中，我們不愿意看到這樣的結(jié)果的

引出的問題

那么如何實現(xiàn)vuex的持久化，使得他能變得像localStorage，sessionStorag一樣呢？

自己造輪子

大體的思路無非就是將vuex的state存起來，初始化的時候去讀取緩存并注冊vuex，具體可看下面兩種方案：

方案1：編寫vuex插件

vuex提供了插件的功能，我們可以在每次mutation的時候?qū)tate保存下來，存到localStorage，sessionStorage中，然后頁面初始化的時候，讀取存儲的state值，覆蓋state的初始值

方案2：利用beforeunload事件

beforeunload事件可能大家用的不是特別多，他并不是一個新特性，而是一個很老的事件，并且兼容性特別好（IE6都兼容了，你敢信）

WechatIMG112.jpeg

beforeunload事件會在頁面卸載之前執(zhí)。如刷新，返回到其他頁面，關(guān)閉等操作都會觸發(fā)這個事件

這就給我們提供另外一種緩存思路，與其每次mutation時記錄變化，為何不在頁面unload時，一次性把要緩存的state都緩存起來呢，這樣效率不是更高嗎？

基于這個原理，我開發(fā)了一款插件vue-vuex-persist

第三方解決方案

大多數(shù)第三方插件基于vuex插件實現(xiàn)。

社區(qū)也有一些不錯的插件，如vuex-persistedstate