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

2052 ワード

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
      })]
    })
    
    cookie デフォルト永続化すべての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
    ジャンププラグインGITHUBアドレスをクリック