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