vue.jpeg
背景
用vue開發(fā)中大型應(yīng)用時候乱凿,我們通常都會使用vuex進(jìn)行狀態(tài)管理却邓,但由于vuex是將數(shù)據(jù)以js對象的形勢維護(hù)在內(nèi)存中唾糯,所以當(dāng)頁面刷新時候利赋,存在內(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