リロード時にVuexのデータが初期化されるのを防ぐ方法

こんにちは。いっちー(@tetestkake_blog)です！

Vue.jsでアプリケーション開発をしている際に、全体で共有したいデータをVuexに入れて管理することがあると思います。

しかしVuexに保存しているデータはブラウザをリロードすると消えてしまいます。

そこでこの記事ではvuex-persistedstateを使用して、リロード時にもVuexのデータを保持し続ける方法を紹介します。

いっちー

vuex-persistedstateを使うことによってさらにVuexが便利になります！

今回の記事ではVuexに関しての解説はしておりません。Vuexに関しては以下の記事をご覧ください。

リロードするとVuexに起こる問題
解決方法
1. 保存場所
2. 使用上の注意点
  1. セキュアな情報を保存してはいけない
  2. 意図的にステートを初期化しないとずっとストレージに残り続ける
vuex-persistedstateの使い方
1. インストール
2. サンプルコード
さいごに

リロードすると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の設定を記述します。