vuex數據持久化存儲

業務需求：
在基於vue開發SPA項目時，為了解決頁面刷新后數據丟失的問題，我們一般都是將數據存儲在localstorage或sessionstorage中；當數據需要全局處理統一管理時，我們也會借助於vue官方提供的vuex來進行數據的統一管理。vuex相比localstorage或sessionstorage來說，存儲數據更安全些。與此同時，vuex也存在一些弊端，當頁面刷新后，vuex中state存儲的數據同時也會被更新，vuex中存儲的數據不能持久化，需要監聽處理來維持vuex存儲的數據狀態持久化。
為解決頁面刷新后vuex中存儲的數據狀態不能持久化的問題，我采取的方案是借助第三方插件工具來實現vuex數據的持久化存儲，來解決頁面刷新后數據更新的問題。

方案一：vuex-persistedstate

• 安裝插件

yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate

• 使用方法

import Vuex from "vuex";
// 引入插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const state = {};
const mutations = {};
const actions = {};

const store = new Vuex.Store({
	state,
	mutations,
	actions,
  /* vuex數據持久化配置 */
	plugins: [
		createPersistedState({
      // 存儲方式：localStorage、sessionStorage、cookies
			storage: window.sessionStorage,
      // 存儲的 key 的key值
			key: "store",
			render(state) {
        // 要存儲的數據：本項目采用es6擴展運算符的方式存儲了state中所有的數據
				return { ...state };
			}
		})
	]
});

export default store;

• vuex中module數據的持久化存儲

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}
 
/* store.js */
import { dataStore } from './module'
 
const dataState = createPersistedState({
  paths: ['data']
});
 
export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
});

注意事項：

1. storage為存儲方式，可選值為localStorage、sessionStorage和cookies；
2. localStorage和sessionStorage兩種存儲方式可以采用上述代碼中的寫法，若想采用cookies坐位數據存儲方式，則需要另外一種寫法；
3. render接收一個函數，返回值為一個對象；返回的對象中的鍵值對既是要持久化存儲的數據；
4. 若想持久化存儲部分數據，請在return的對象中采用key：value鍵值對的方式進行數據存儲，render函數中的參數既為state對象。

方案二：vuex-persist

• 安裝插件

yarn add vuex-persist
// 或
npm install --save vuex-persist

• 使用方法

import Vuex from "vuex";
// 引入插件
import VuexPersistence from "vuex-persist";

Vue.use(Vuex);
//  初始化
const state = {
	userName:'admin'
};
const mutations = {};
const actions = {};
// 創建實例
const vuexPersisted = new VuexPersistence({
	storage: window.sessionStorage,
  render:state=>({
  	userName:state.userName
    // 或
    ...state
  })
});

const store = new Vuex.Store({
	state,
  actions,
  mutations,
  // 數據持久化設置
  plugins:[vuexPersisted.plugins]
});

export default store;

• 屬性方法

屬性值	數據類型	描述
key	string	The key to store the state in the storage Default: 'vuex'
storage	Storage (Web API)	localStorage, sessionStorage, localforage or your custom Storage object.Must implement getItem, setItem, clear etc.Default: window.localStorage
saveState	function(key, state[, storage])	If not using storage, this custom function handles saving state to persistence
restoreState	function (key[, storage]) => state	If not using storage, this custom function handles retrieving state from storage
reducer	function (state) => object	State reducer. reduces state to only those values you want to save. By default, saves entire state
filter	function (mutation) => boolean	Mutation filter. Look at mutation.type and return true for only those ones which you want a persistence write to be triggered for. Default returns true for all mutations
modules	string[]	List of modules you want to persist. (Do not write your own reducer if you want to use this)
asyncStorage	boolean	Denotes if the store uses Promises (like localforage) or not (you must set this to true when suing something like localforage) Default: false
supportCircular	boolean	Denotes if the state has any circular references to itself (state.x === state) Default: false

總結

上述兩種方案都可以實現vuex數據持久化存儲。方案一是我在實際開發過程中用到的，方案二是在Github上看到的，綜合來說，兩者都可以時間最終的需求，而且都有對應的案例Demo可以參考。相比來說方案一在GitHub上的start數要高於方案二。
請結合實際情況選擇符合自己的方案！