VuexストアをlocalStorageに永続化するためには、以下の手順を実行します。
-
Vuex PersistedStateプラグインのインストール: Vuex PersistedStateは、Vuexストアの状態をlocalStorageに永続化するための便利なプラグインです。まず、プロジェクトにVuex PersistedStateをインストールします。
npm install vuex-persistedstate
-
Vuexストアの設定: Vuexストアの設定ファイル(通常は
store/index.js
)で、Vuex PersistedStateプラグインを使用するように設定します。import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ストアの設定 plugins: [createPersistedState()] }) export default store
これにより、Vuexストアの状態が自動的にlocalStorageに永続化されるようになります。
-
オプションの設定: Vuex PersistedStateプラグインには、さまざまなオプションがあります。たとえば、永続化するストアのモジュールを指定することもできます。
import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ストアの設定 plugins: [ createPersistedState({ // 永続化するモジュールの指定 paths: ['module1', 'module2'] }) ] }) export default store
上記の例では、
module1
とmodule2
の状態のみがlocalStorageに永続化されます。
以上の手順を実行すると、Vuexストアの状態が自動的にlocalStorageに永続化されます。これにより、ページのリロードや再読み込みの際にも状態が保持されるようになります。
この方法はシンプルで簡単であり、Vuexストアの永続化に関する手間を削減することができます。また、必要に応じてオプションを設定することもできます。