Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
53
Help us understand the problem. What are the problem?

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

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

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

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プロパティに管理対象のモジュールをセットしておく必要があります。(ここでは例としてauthmasterというモジュールがあるとします)。大元の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に保存すべきではないですが)

注意点

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
53
Help us understand the problem. What are the problem?