はじめに

Vuex の状態を robinvdvleuten/vuex-persistedstate で localStorage などに永続化する方法。

TL;DR

  • npm i vuex-persistedstate でインストール
  • plugins で設定するだけで OK
  • localStorage 以外を使いたい場合は storage オプションで設定
    • sessionStorage, Cookie, localStorage + 暗号化, etc
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. 使い方
    3. 保存先変更
      1. sessionStorage
      2. Cookie
      3. localStorage + 暗号化
      4. 注意事項
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.6
BuildVersion:	19G73

$ node -v
v12.7.0

$ npm -v
6.14.5

$ vue -V
@vue/cli 4.4.6

$ npm ls vue
vue@2.6.11 | MIT | deps: none | versions: 294

$ npm ls vuex-persistedstate
vuex-persistedstate@3.1.0 | MIT | deps: 2 | versions: 31

詳細

セットアップ

npm i でインストール。

1
$ npm i vuex-persistedstate

src/store/index.js などに plugins の記述を追加。各種オプションは createPersistedState([options]) - API を参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // your states
  },
  mutations: {
    // your mutations
  },
  // ...
  plugins: [
    createPersistedState({
      key: 'your app key',
    }),
  ],
})

使い方

セットアップ(plugins の設定)のみすれば、Vuex への保存処理を行うと同時に localStorage などに保存され、リロードなどした際の初期値として参照されるようになる。(なので、ユーザー側で何かを意識する必要は無し)

保存先変更

参考: Customize Storage

デフォルトでは localStorage に保存される。他の保存先を使いたい場合は storage オプションを指定する。

getItem, setItem, removeItem を持つ Object であれば OK。無ければ一緒に設定する。

sessionStorage

sessionStorage を使う場合。

1
2
3
4
5
6
7
8
9
export default new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      key: 'your app key',
      storage: window.sessionStorage,
    }),
  ],
})

Cookie (js-cookie) を使う場合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import * as Cookies from "js-cookie";
export default new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      key: 'your app key',
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value)=> Cookies.set(key, value),
        removeItem: key => Cookies.remove(key),
      },
    }),
  ],
})

localStorage + 暗号化

参考: Encrypted Local Storage

softvar/secure-ls などを使うことで localStorage に暗号化して保存できる。

細かいオプションは API Documentation - softvar/secure-ls を参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { Store } from "vuex";
import createPersistedState from "vuex-persistedstate";
import SecureLS from "secure-ls";
var ls = new SecureLS({ isCompression: false });

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => ls.get(key),
        setItem: (key, value) => ls.set(key, value),
        removeItem: key => ls.remove(key),
      },
    }),
  ],
});

注意事項

LocalForage の項に書かれているが、localForage/localForage のようにメソッドが非同期のものを storage オプションに渡すのはダメな模様。

まとめ

  • npm i vuex-persistedstate でインストール
  • plugins で設定するだけで OK
  • localStorage 以外を使いたい場合は storage オプションで設定
    • sessionStorage, Cookie, localStorage + 暗号化, etc

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list