vuex數據持久化的兩種實現方案

Posted on by

業務需求：

在基於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
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 it self(state.x === state)Default: false

總結

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

請結合實際情況選擇符合自己的方案！

到此這篇關於vuex數據持久化的兩種實現方案的文章就介紹到這瞭,更多相關vuex數據持久化內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：