vuex データの永続化のための 2 つの実装ソリューション

糸にvuex-persistedstateを追加する
// または npm install --save vuex-persistedstate

「vuex」からVuexをインポートします。
// プラグインをインポートします。 import createPersistedState from "vuex-persistedstate";

Vue.js で Vuex をビルドします。

定数状態 = {};
const 変異 = {};
定数アクション = {};

定数ストア = 新しい Vuex.Store({
	州、
	突然変異、
	行動、
  /* vuex データ永続化設定 */
	プラグイン: [
		永続状態を作成します({
      // ストレージメソッド: localStorage、sessionStorage、cookies
			ストレージ: window.sessionStorage、
      // 保存されたキーのキー値 key: "store",
			レンダリング(状態) {
        //保存するデータ: このプロジェクトでは、es6 拡張演算子を使用してすべてのデータを状態に保存します return { ...state };
			}
		})
	]
});

デフォルトストアをエクスポートします。

/* モジュール.js */
エクスポートconst dataStore = {
  州： {
    データ： []
  }
}
 
/* ストア.js */
'./module' から { dataStore } をインポートします。
 
const dataState = createPersistedState({
  パス: ['データ']
});
 
新しい Vuex.Store をエクスポートします({
  モジュール:
    データストア
  },
  プラグイン: [dataState]
});

糸を追加する vuex-persist
// または npm install --save vuex-persist

「vuex」からVuexをインポートします。
// プラグインをインポートします。 import VuexPersistence from "vuex-persist";

Vue.js で Vuex をビルドします。
// 初期化 const state = {
	ユーザー名:'admin'
};
const 変異 = {};
定数アクション = {};
// インスタンスを作成する const vuexPersisted = new VuexPersistence({
	ストレージ: window.sessionStorage、
  レンダリング:状態=>({
  	ユーザー名:状態.ユーザー名
    // または...状態
  })
});

定数ストア = 新しい Vuex.Store({
	州、
  行動、
  突然変異、
  //データ永続設定プラグイン: [vuexPersisted.plugins]
});

デフォルトストアをエクスポートします。