vuex-persistedstate でログイン状態を維持する

Vuexを使ってログイン情報を保持する実装をおこなったが、ブラウザをリロードすることでVuexが初期化されてしまいログアウトされてしまった。ログイン情報を永続化するためには、Vuexのプラグインとして用意されている 「vuex-persistedstate」 を使うことで解決できる。

github.com

インストール

npm install vuex-persistedstate

使い方

使っているVuexにplugins: [createPersistedState()]を用意するだけで使える。この一文だけで永続化ができるので非常に便利！

export default new Vuex.Store({
    state: {
      ///
    },
    mutations:{
      ///
    },
    getters: {
      ///
    },
    actions: {
      ///
    },
    plugins: [createPersistedState()]
})

オプション

一文だけで使えるのは非常に便利ではあるのだが、実運用を考えると少し工夫が必要になる。次に用意したオプションを考慮に入れると良い。まずkeyは永続化状態を保存する際のキーとなるものである。デフォルトではVuexとなるため、複数のアプリケーションで使う場合はアプリ名などで一意となる値をいれたい。次にpathsは保存したいstateを指定する。この値を指定しない場合はすべてのstateが保存対象となる。保存対象を絞りたい場合は、明示的に記述していく。例では、tokenだけが永続化される設定になる。最後にstorageはデフォルトでlocalStorageに保存されるようになっている。他にもsessionStrageとCookieが選択できる。Cookieは設定のためにjs-cookieが必要だったりするため割愛する。sessionStrageを使う場合は、window.sessionStrageに変更すれば良い。

 state: {
      userId : "",
      token : "",
  },
  plugins: [createPersistedState(
    key: 'Vuex',
    paths: ['token'],
    storage: window.localStorage
  )]