目錄

• 業務需求：
  
• 方案一：x-persistedstate
• 方案二：vuex-persist
• 總結
  

業務需求：

在基於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 = {}erprqrWz
 
;

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. */
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,// 資料持久化設定
  plugins:[vuexPersisted.plugins]
});

export default store;

屬性方法

總結

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

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

到此這篇關於vuex資料持久化的兩種實現方案的文章就介紹到這了,更多相關vuex資料持久化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！