背景

用vue開發中大型應用時候，我們通常都會使用vuex進行狀態管理，但由於vuex是將資料以js物件的形勢維護在記憶體中，所以當頁面重新整理時候，存在記憶體中的vuex資料將會丟失，在很多場景中，我們不願意看到這樣的結果的

引出的問題

那麼如何實現vuex的持久化，使得他能變得像localStorage，sessionStorag一樣呢？

自己造輪子

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

方案1：編寫vuex外掛

vuex提供了外掛的功能，我們可以在每次mutation的時候將state儲存下來，存到localStorage，sessionStorage中，然後頁面初始化的時候，讀取儲存的state值，覆蓋state的初始值

方案2：利用beforeunload事件

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

beforeunload事件會在頁面解除安裝之前執。如重新整理，返回到其他頁面，關閉等操作都會觸發這個事件

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

第三方解決方案

大多數第三方外掛基於vuex外掛實現。

作者：ggsxp
連結：https://juejin.im/post/5b71ad7ff265da283105dfe0
來源：掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。