vuex-persistedstateでlocalStorageとsessionStorageを併用する

vuex-persistedstateを使用した際に、データによってsessionStorageとして保存したい時とlocalStorageとして保存したい時があったので、併用の設定ができるか試してみました。

サンプルコード

sessionStorage用とlocalStorage用でそれぞれプラグインの設定をすればいいようです。

以前にvuex-persistedstateを試した記事から必要な箇所だけ抜粋します。

import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";

export default createStore({
  plugins: [
    createPersistedState({
      paths: [
        'count'
      ],
      storage: window.sessionStorage
    }),
    createPersistedState({
      paths: [
        'message'
      ],
      storage: window.localStorage
    })
  ],
  state: {
    count: 0,
    message: ''
  },
  ～略～
})

6行目～11行目がsessionStorage、12行目～17行目がlocalStorageの設定になります。
これでcountはsessionStorageでの保存、messageはlocalStorageでの保存になりました。