How to encrypt sessionStorage using vuex-persistedstate?

[SuiKaSan]

• vuex-persistedstate version: 4.0.0
• node version: 14.17.0
• npm (or yarn) version: 6.14.13
• secure-ls version:1.2.6
• vue version: 3.0.0
• vuex version: 4.0.0

Relevant code or config

import { createStore, Store } from 'vuex';
import { State } from 'vue'
import user, { IUserInfoState } from './modules/user';
import global, { IGlobalState } from './modules/global';
import SecureLS from 'secure-ls'
import createPersistedState from 'vuex-persistedstate'

declare module '@vue/runtime-core' {
  interface State {
    user: IUserInfoState;
    global: IGlobalState;
  }
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

const ls = new SecureLS({ isCompression: false })
window.sessionStorage.getItem = (key) => ls.get(key) 
window.sessionStorage.setItem = (key, value) => ls.set(key, value)
window.sessionStorage.removeItem = (key) => ls.remove(key)

export default createStore<State>({
  modules: {
    user,
    global,
  },
  plugins: [
    createPersistedState({ storage: window.sessionStorage })
  ]
});

I want to encrypt the sessionStorage using secure-ls. But with the code above, the secure-ls only encrypted the localStorage. I already issued this problem in the repository of vue-persistedstate. But they said this is scure-ls's issue. Anyone knows why? Please do tell.

[derHodrig]

import createPersistedState from 'vuex-persistedstate'
import SecureLS from 'secure-ls'
const ls = new SecureLS({
  encodingType: 'rc4', // changeable
  isCompression: false,
  encryptionSecret: 's3cr3tPa$$w0rd@123', // change this
})

export default ({ store, req }) => {
  createPersistedState({
    key: 'TheGreatStore',
    paths: [
      'userStore.user', // Im using modules mode of vuex
    ],
    storage: {
      getItem: (key) => ls.get(key),
      setItem: (key, value) => ls.set(key, value),
      removeItem: (key) => ls.remove(key),
    },
  })(store)
}

This is working in Nuxt Js at v2.15.3 with target static and SSR.

Important for Nuxters, fetch() won't have the data from localstorage. You need to do something like that

created() {
    this.loading = true
  },
  beforeMount() {
    this.$store.dispatch('fetchCoreDataAsync').then(() => {
      this.someOtherMethodDependingOnLocalStorageItems()
      this.loading = false
    })
  },