Vuexの永続化対応を簡単に実装できるライブラリ(vuex-persistedstate)

前置き

Vue.jsを使用してWEBアプリを開発する際、認証に関するステート(ログイン済みかそうでないか、ログインユーザー名等)をグローバルステートとしてStoreで管理するして運用することが多いかと思います。

ただ、Vue.js + Vuexで認証機能を作るだけだと、ブラウザを閉じたり、リロードするとメモリ上に保存されたvuexのステートが初期化されログアウトした状態になってしまいます。

そこで、本記事では、vuex-persistedstate というvuexのストアの永続化を簡単に実装することができるライブラリをご紹介します。

vuex-persistedstate のインストール

npmでインストール

% npm install vuex-persistedstate

ストアの設定

モジュール化されたauthストアがあるとします。
今回はこのstateのtokenをsessionStorageに保存します。

auth.js

const state = {
    token: ''
};
 
const mutations = {
    login (state, payload) {
        state.token = payload;
    },
    logout (state) {
        state.token = null;
    }
};
 
export default {
    namespaced: true,
    state,
    mutations
};

vuex-persistedstateの設定はVuex.Storeのpluginsに設定します。
sessionStorageのキー。他のアプリと被らないユニークな文字列にします。

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate";
import auth from "./auth";
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    modules: {
        auth
    },
    strict: true,
    plugins: [createPersistedState({
        key: 'XXXXXXXX',
    })]
});

以上で設定は完了です。
これで、auth.tokenが変更される度に自動的にsessionStorageも書き換えてくれます。

vuex-persistedstateを使えば簡単にVuexのストアの永続化ができます。

まとめ

いかがでしたでしょうか。Vue.jsを使用してWEBアプリを開発する際、認証に関するステート(ログイン済みかそうでないか、ログインユーザー名等)をグローバルステートとしてStoreで管理するして運用することが多いかと思います。本記事では、vuex-persistedstate というvuexのストアの永続化を簡単に実装することができるライブラリをご紹介します。