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での保存になりました。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年10月
 1
2345678
9101112131415
16171819202122
23242526272829
3031