【Vue】リロードしても大丈夫。そう、vuex-persistedstateならね。

Vuexで管理しているステートをリロードしても消えないようにする

vuex-persistedstateというVeux関連パッケージの紹介記事です。すでに同様の記事はありますが、備忘録として自分でまとめた物を残しておきます。

• 【Vuex】リロードしてもStateの中身を消さずに維持する方法
• Vue基礎：Vuexの永続化対応

Vuexではリロードするとステートは初期状態にもどってしまう

VuexはVueインスタンスがもつステート（データ）をストアと呼ばれる管理場所で一括管理して、全てのコンポーネント間でステートを簡易に共有する仕組みを提供してくれます。つまり、あるコンポーネントでステートの値を変更して、他のコンポーネントでそのステートをストアから取得して使うことができます。

しかし、メモリ上に保存されたVeuxのステートはブラウザを閉じたり、リロードしたりすると初期状態にリセットされてしまいます。

例えばVuexを使って入力フォームの値やユーザーが選択したセレクトボックスの値などを管理していた場合、誤って途中でブラウザを閉じたりリロードしたりするとユーザーが入力した値は消えてしまいます。

このようなケースではUX向上のためにステートを維持させた方が良いでしょう。

このようなケースにはvuex-persistedstateを使うと、VeuxのステートをWebストレージに一旦逃して、リロードした際に読み込んでステートを維持させることが可能です。

vuex-persistedstateを使う

詳しくはこちらを参照。

nuxtで使う時はpluginとして設定が必要なようです。

インストール

yarnまたはnpmでインストール出来ます。

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

使い方

まず、ストアをモジュールで分けている場合は、vuexの設定でmodulesプロパティに管理対象のモジュールをセットしておく必要があります。（ここでは例としてauthとmasterというモジュールがあるとします）。大元のVuexの設定ファイル（ここではindex.js）でストアのセッティングをするところにvuex-persistedstateの設定を書いていきます。

vuex-persistedstateの設定はVuexの設定のpluginsプロパティに書いていきます。最低限設定しておいた方がいいのはkey, paths, storageプロパティかなと思います。（なくても動くには動く）

keyはストレージに保存する時のプロパティ名です。デフォルトではvuexですが、他のアプリとかぶる可能性があるのでユニークなものに変えましょう。

pathsに管理対象のステートを書きます。値は<モジュール名>.<ステート>と書いて、配列に入れます。配列に入れたステートが管理対象になります。pathsを書かなかった場合はデフォルトで全てのステートが対象になります。

storageには保存するストレージを指定します。Webストレージ（ローカルストレージ、セッションストレージ）とCookieから選べるようです。

他にもプロパティが色々あるようです。全プロパティはここから確認出来ます。

次は設定の一例。

frontend/stores/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import auth from './auth.js'
import master from './master.js'

Vue.use(Vuex)

// Vuexの設定
export default new Vuex.Store({  
  // ストアをモジュールに分けている場合。vuexのモジュールを指定
  modules: {
    auth,
    master,
  },

  // `createPersistedState()`でインスタンス作成。引数に設定を書く
  plugins: [createPersistedState(
    { // ストレージのキーを指定。デフォルトではvuex
      key: 'anyGreatApp',

      // 管理対象のステートを指定。pathsを書かない時は`modules`に書いたモジュールに含まれるステート全て。`[]`の時はどれも保存されない
      paths: [
        'auth.isLoggedIn',
        'master.dataSelected'
      ],

      // ストレージの種類を指定する。デフォルトではローカルストレージ
      storage: window.sessionStorage
    }
  )]
})

保存先の違い

storageの違いは次の通りです。使用用途によって、変えるといいと思います。複数タブでの作業を想定している場合はセッションストレージを選択するといいと思います。タブごとに異なるセッションとして扱われるので、ステートもタブごとに管理出来ます。細かい違いはCookieとWebStorageとSessionについてのまとめを参照。

指定できるストレージ	storageプロパティの値	保存期間の違いなど
ローカルストレージ	window.localStrage	意図的に消さない限りずっと残る
セッションストレージ	window.sessionStrage	セッションが切れたらorタブやブラウザを閉じたらリセット
Cookie	こちらを参照	期限を任意に設定できる&容量が小さい(4KB)& HTTP/HTTPSでサーバーに送信される

また、ローカルストレージのデータを暗号化できるパッケージと組み合わせてセキュアに使うこともできるようです。ハッキングされて流出するとまずいようなデータを扱う時はいいかもしれません。
（そもそも、そういったデータは本来Web StorageやCookieに保存すべきではないですが）

注意点

ログアウト時に画面のリロードでステートを初期状態にリセットするようにしている場合は、このパッケージを使うと当然リセットは効かなくなります。

その場合、ログアウトしてもステートはそのままになるので、違うユーザーでログインしても以前のユーザーのステートが残ったままになってしまいます。

ステートをリセットするアクション・ミューテーションを作っておいて、ログアウト時に呼び出すようにしておくと良さそうです
（他にステートをまとめてリセットするいい方法があったら教えてください）