Vuex永続化プラグイン-リフレッシュデータの消失の問題を解決
2052 ワード
vuexはグローバルなステータス管理が可能ですが、リフレッシュ後にリフレッシュするとデータが消えます.これは私たちが見たくないことです.どのように解決すれば、ローカルストレージと組み合わせてデータの持続化を行うことができ、プラグイン-vuex-persistedstateを通じて行うことができます.
1.HTML 5のローカルストレージを手動で利用する
方法 vuexのstateはlocalStorageまたはsessionStorageまたは他の記憶方式で の値をとる. mutationsでは,定義された方法でvuexの状態を操作するとともに記憶に対しても対応する操作を行う.
に質問で最も直感的なのは、手動で書くのが面倒だということです.
2.vuex-persistedstateプラグインの利用
使用方法取付 storeの下に導入するindex.js中
デフォルトはlocalStorageに格納されます
セッションストアに格納するには、次のように構成されています.
永続化が必要なstateを指定し、次のように構成します.
vuexは複数のプラグインの書き方を参照します
例えば、vuexプロンプトのプラグインは、永続化されたプラグインとともに使用され、以下のように構成されています.
ジャンププラグインGITHUBアドレスをクリック
1.HTML 5のローカルストレージを手動で利用する
方法
state vuex
に質問
2.vuex-persistedstateプラグインの利用
,
使用方法
npm install vuex-persistedstate --save
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アドレスをクリック