Vue基礎：Vuexの永続化対応

Vuexのステートデータを永続化対応しないと、F5とかページreloads操作でデータはなくなります。
一般的に永続化の対応が必要だと思います。

ツールとして、「vuex-persistedstate」がよく使います。

vuex-persistedstateとは

Persist and rehydrate your Vuex state between page reloads.

インストール

npm install --save vuex-persistedstate

storeに設定追加

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
})

ストレージの種類

1. LocalStorage

デフォルトのストレージはlocalstorageです。

2. SessionStorage

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({ storage: window.sessionStorage })],
})

3. Cookies

cookieに保存したい場合は、カスタマイズが必要です。
getItem、setItem、removeItemを実装すればよいです。
下記はCookieに保存するサンプルです。

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) =>
          Cookies.set(key, value, { expires: 7, secure: true }), //7日間有効
        removeItem: key => Cookies.remove(key),
      },
    }),
  ],
})

js-cookies: https://github.com/js-cookie/js-cookie
vuex-persistedstate：https://github.com/robinvdvleuten/vuex-persistedstate

以上