零弐壱蜂

[Vuex] ストア情報を永続化対応する方法

2 min read
hiroweb developer

概要

ブラウザのリロード時にストアに保持していたデータは破棄されてしまう。

ユーザの操作上リロードが許容すべきセッション情報や更新頻度の高くない情報は保持しておきたい場面がある。

方法

vuex-persistedstateを利用する。(localForgeには対応していない)

npm install vuex-persistedstate をした後、下記のように Store のプラグインとして定義する。

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: "",
  },
  mutations: {},
  getters: {},
  actions: {},
  plugins: [
    createPersistedState({
      key: "b0218jp",
      paths: ["token"],
      storage: window.sessionStorage,
    }),
  ],
});

storageをwindow.sessionStorageとしているので、ページのセッションはブラウザを開いている限り有効となる。これでページのリロードを実行されても持続する。

もし、保持時間に有効期限やブラウザを閉じても有効にしたい場合はstorageの指定を Cookie にすると良い。js-cookieなどを利用し、下記のようにプラグイン定義を行うと実現できる。

plugins: [
  createPersistedState({
    storage: {
      getItem: (key) => Cookies.get(key),
      setItem: (key, value) =>
        Cookies.set(key, value, {
          expires: 3,
          secure: true,
        }),
      removeItem: (key) => Cookies.remove(key),
    },
  }),
];

関連