vuex状態持続化、vuex-persistedstate
Vuexとは
Vuexはvue.js専用に設計された集中的なステータス管理アーキテクチャです.ステータス?dataのプロパティが他のvueコンポーネントに共有される必要がある部分をステータスと理解します.簡単に言えばdataで共通の属性が必要です.
データ消失
みんなはVuexを使う時ブラウザが更新するだけで、Vuexデータは失って、毎回また手動でローカルキャッシュの中に存在するのはとても不便で、今日探してみて、1つの小さいプラグインがVuexの持続性を維持することができることを発見します
原理はみんな知っています.localStorageです.使い方です.
vuex-persistedstate
vuex-persistedstateブラウザのローカルストレージ(local storage)を使用してステータス(state)を永続化します.これは、ページをリフレッシュしたり、ラベルページを閉じたりしても、データは削除されません.
vuex-persistedstate GitHubアドレス
まずインストール
storeフォルダのindex.jsに導入
vuexプラグインの初期化
デフォルトではlocalStorageのストレージ方式を使用しています.本プロジェクトではsessionStorageのストレージ方式に変更する必要があるため、構成では他の構成があれば公式apiを参照することができます.
Vuexはvue.js専用に設計された集中的なステータス管理アーキテクチャです.ステータス?dataのプロパティが他のvueコンポーネントに共有される必要がある部分をステータスと理解します.簡単に言えばdataで共通の属性が必要です.
データ消失
みんなはVuexを使う時ブラウザが更新するだけで、Vuexデータは失って、毎回また手動でローカルキャッシュの中に存在するのはとても不便で、今日探してみて、1つの小さいプラグインがVuexの持続性を維持することができることを発見します
原理はみんな知っています.localStorageです.使い方です.
vuex-persistedstate
vuex-persistedstateブラウザのローカルストレージ(local storage)を使用してステータス(state)を永続化します.これは、ページをリフレッシュしたり、ラベルページを閉じたりしても、データは削除されません.
vuex-persistedstate GitHubアドレス
まずインストール
npm install vuex-persistedstate --save-dev
storeフォルダのindex.jsに導入
import createPersistedState from 'vuex-persistedstate'
vuexプラグインの初期化
const store = new Vuex.Store({
modules: {
user,
groupBuying,
clearance
},
getters,
plugins: [createPersistedState()]
})
デフォルトではlocalStorageのストレージ方式を使用しています.本プロジェクトではsessionStorageのストレージ方式に変更する必要があるため、構成では他の構成があれば公式apiを参照することができます.
plugins: [createPersistedState(
{ storage: window.sessionStorage }
)]