vuex持久化方案探究

背景

用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都緩存起來呢，這樣效率不是更高嗎？

基於這個原理，我開發了一款插件vue-vuex-persist

第三方解決方案

大多數第三方插件基於vuex插件實現。

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