vuex状態持続化、vuex-persistedstate

1186 ワード

Vuexとは
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 }
  )]