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データを初期化する方法