vuexでリロードされても情報を永続化できるvuex-persistedstateの使い方

2021年6月11日2021年6月12日Vue.js

vuexを使っていてリロードされた場合、表示しておいてほしい情報でもstateがリセットされてしまって、表示できなくなります。 vuex-persistedstateというプラグインを使うとstateの情報を永続化できます。 vuex-persistedstateの使い方をまとめました。

vuexでリロードされても情報を永続化できるvuex-persistedstateの使い方

githubの公式

https://github.com/robinvdvleuten/vuex-persistedstate 解説がわかりやすい記事 https://qiita.com/_masa_u/items/b58b92c283f4e770e094

インストール

# yarn
yarn add vuex-persistedstate
# npm
npm install --save　vuex-persistedstate

インポート

src/store/index.jsにまずはインポートします。

import createPersistedState from 'vuex-persistedstate'

そして、プラグインを設定します。

export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
plugins: [createPersistedState(
    { // ストレージのキーを指定
      key: 'appName',
      // ストレージの種類を指定
      storage: window.sessionStorage
    }
)]

keyはデフォルトでは、vuexになっています。 storageはローカルストレージがデフォルトです。

modulesを使っている場合

plugins: [createPersistedState( { // ストレージのキーを指定 key: 'appName’, paths: [ 'auth’, 'playlists’ ], // ストレージの種類を指定する。デフォルトではローカルストレージ storage: window.sessionStorage } )] modulesを使っている場合、管理対象のステートを指定します。pathsを書かない時は`modules`に書いたモジュールに含まれるステート全てが対象となります。

永続化の解除

vuex-persistedstateを使うと簡単にデータの永続化ができる反面、ずっと残ってしまうトラブルが発生します。 strageをsessionStrageを利用すると、セッションが切れたり、タブやブラウザを閉じたら消えますが、そうしない場合は情報が残ってしまい、それが問題になるケースが考えられます。 そのため、vuex-persistedstateを使ったらstateの状態を初期にリセットしておくといいでしょう。 vuex-persistedstateで永続化したstateデータを初期化する方法