Vuex永続化プラグイン(vuex-persistedstate)-リフレッシュデータの消失の問題を解決

vuexはグローバルなステータス管理が可能ですが、リフレッシュ後にリフレッシュするとデータが消えます.これは私たちが見たくないことです.どのように解決すれば、ローカルストレージと組み合わせてデータの持続化を行うことができ、プラグイン-vuex-persistedstateを通じて行うことができます.
1.HTML 5のローカルストレージを手動で利用する
方法

vuexのstateはlocalStorageまたはsessionStorageまたは他の記憶方式で

の値をとる.

mutationsでは,定義された方法でvuexの状態を操作するとともに記憶に対しても対応する操作を行う.これによりstateはストレージとともに存在しvuexと同期

になる.
に質問

で最も直感的なのは、手動で書くのが面倒だということです.

2.vuex-persistedstateプラグインの利用
プラグインの原理も実はストレージ方式を結合して、ただ統一的な配置は手動で毎回ストレージ方法を書く必要はありません
使用方法
インストール

npm install vuex-persistedstate --save

導入および構成
storeの下のindex.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

デフォルトはlocalStorageに格納されます
セッションストアに格納するには、次のように構成されています.

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

クッキーを使いたい
すべてのstateをデフォルトで永続化
永続化が必要なstateを指定し、次のように構成します.

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          //    state  assessmentData
          assessmentData: val.assessmentData
        }
     }
  })]

vuexは複数のプラグインの書き方を参照します
例えば、vuexプロンプトのプラグインは、永続化されたプラグインとともに使用され、以下のように構成されています.

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
//      vuex          
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins 1次元配列でないとエラーが解析されます
転載先:https://juejin.im/post/5cb3fea0f265da03587befa7