こんにちは。いっちー(@tetestkake_blog)です!
Vue.jsでアプリケーション開発をしている際に、全体で共有したいデータをVuexに入れて管理することがあると思います。
しかしVuexに保存しているデータはブラウザをリロードすると消えてしまいます。
そこでこの記事ではvuex-persistedstateを使用して、リロード時にもVuexのデータを保持し続ける方法を紹介します。

vuex-persistedstateを使うことによってさらにVuexが便利になります!
今回の記事ではVuexに関しての解説はしておりません。Vuexに関しては以下の記事をご覧ください。
リロードするとVuexに起こる問題
冒頭でも少し説明しましたが、リロードするとVuexのステートが初期化されてしまいます。
これはVuexのステートがメモリ上に保存されているためです。
リロードの他にも、ブラウザを閉じたりすると同じくVuexの値が初期化されてしまいます。
解決方法
それらの事象を解決するにはvuex-persistedstateを使用します。
vuex-persistedstateでは、ストアに保存した値をメモリ上から指定したストレージに保存することで、
リロードされてもステートの値が初期化されることを防ぎます。
保存場所
ステートの保存場所は以下の3つから選択できます。
保存場所 | storageプロパティの値 | 保存期間 |
ローカルストレージ | window.localStrage | 消すまで残り続ける |
セッションストレージ | window.sessionStrage | セッションが切れるまで or タブやブラウザが閉じられるまで |
Cookie | このページを参照 | 任意の期間を指定可能 |
使用上の注意点
vuex-persistedstateを使う上での注意点は以下になります。
セキュアな情報を保存してはいけない
ローカルストレージやCookieなどは簡単に値を確認することができてしまいます。
情報漏洩の観点からセキュアな情報(ログイン情報など)は保存しないことが推奨されています。
意図的にステートを初期化しないとずっとストレージに残り続ける
いったんローカルストレージに保存すると、その後削除しない限り残り続けます。
例えばローカルストレージにログイン名を保存していたとして、ログアウト時にステートの初期化処理がない場合、
別のユーザーにて同じブラウザでログインした場合に前のログインユーザー名が表示されるなどの不具合が生じる場合があります。
その場合はログアウト時に意図的にステートの値を初期化すると良さそうです。
vuex-persistedstateの使い方
ここからはサンプルコードを用いてvuex-persistedstateの使い方を解説します。
インストール
以下のコマンドでインストールします。
yarn add vuex-persistedstate
npmの場合は以下のコマンドを使用します。
npm install --save vuex-persistedstate
サンプルコード
以下がvuex-persistedstateを使用したサンプルコードになります。
src/store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isLoggedIn: false,
userId: 0,
},
mutations: {
onUserLoginStatusChanged(state, isLoggedIn) {
// ログインしているかどうか
state.isLoggedIn = isLoggedIn;
},
updateUserId(state, userId) {
state.userId = userId;
}
},
getters: {
isLoggedIn(state) {
return state.isLoggedIn;
},
userId(state) {
return state.userId;
}
},
plugins: [createPersistedState(
{
// ストレージのキーを指定。デフォルトではvuex
key: 'myApp',
// 管理対象のステートを指定
paths: [
'isLoggedIn',
'userId',
],
// ストレージの種類を指定。デフォルトではローカルストレージ
storage: window.sessionStorage,
}
)]
});
state, mutations, gettersはVuex用のコードになり、
pluginsでvuex-persistedstateの設定を記述します。
key
keyではストレージに保存する際のキーを指定します。
デフォルトではvuexという名前が使用されます。
他との競合を避けるという意味でも、ユニークな名前をつけると良いでしょう。
paths
pathsでは管理対象のステートを指定します。
今回の場合ではisLoggedIn, userIdを指定してリロード時にも値が保持できるようにしています。
storage
storageでは保存するストレージを指定します。
ローカルストレージ・セッションストレージ・Cookieから選択でき、
デフォルトではローカルストレージが選択されます。

これでリロードしてもVuexの値が保持されるようになりました!
さいごに
今回はvuex-persistedstateを使用した、リロード時にVuexのデータが初期化されるのをを防ぐ方法を解説しました。
Vuexにて値を保持したい場合はvuex-persistedstateを使ってみてください!
参考リンク
robinvdvleuten/vuex-persistedstate
【Vue】リロードしても大丈夫。そう、vuex-persistedstateならね。
Vue.jsおすすめ書籍
お知らせ
にほんブログ村のランキングに参加しています。よろしければ下のボタンをポチッとしていただけると嬉しいです\(^^)/

にほんブログ村
コメント