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
