Vuex データの永続性を実装するためのアイデアとコード

   'vue' から Vue をインポートします
   'vuex' から Vuex をインポートします
   Vue.use(Vuex)
   定数状態 = {}
   const ゲッター = {}
   const 変異 = {}
   定数アクション = {}
   デフォルトの新しいVuex.Storeをエクスポートします({
       州、
       ゲッター、
       突然変異、
       アクション
   
   })

エクスポートデフォルト（オプション = {}）=> {
  const storage = options.storage || (window && window.localStorage);
  const key = options.key || "vuex";

  // 状態の値を取得する const getState = (key, storage) => {
    定数値 = storage.getItem(キー);
    試す {
      戻り値の型が "undefined" !== ? JSON.parse(value) : undefined;
    } キャッチ (エラー) {
      コンソールで警告します(エラー);
    }
    未定義を返します。
  };

  // 状態の値を設定する const setState = (key, state, storage) =>
    storage.setItem(キー、JSON.stringify(状態));

  戻り値 (保存) => {
    // 初期化中にデータを取得します。存在する場合は、元の vuex 状態を置き換えます。const data = Object.assign(store.state, getState(key, storage));
    if (データ) {
      データをストアに置き換えます。
    }

    // ストアの変更をサブスクライブします。ハンドラは各ミューテーションが完了した後に呼び出され、ミューテーションとミューテーション後の状態をパラメータとして受け取ります。store.subscribe((mutation, state) => {
      setState(キー、状態、ストレージ);
    });
  };
};

"@/plugins/VuexPersist" から VuexPersist をインポートします。

エクスポートデフォルトcreateStore({
  プラグイン: [VuexPersist()],
});