vue.js - How to change the vuex-persist key option dynamically?

Question

I am using the plugin: https://www.npmjs.com/package/vuex-persist, and it works great. But I am not sure that what I am trying to do will work. My application has a module of authentication, and the user can create their own settings that are stored in vuex and localstorage. But since there will be different users there will be different settings and that is why each user will have different localStorage, that is why they need to have different name.

In that case I need to change the name of the key setting on the storage plugin dynamically, and I don't know how to do that. The setting for the plugin look like this

import Vue from 'vue'
import App from 'App.vue';
import Vuex 'vuex';
import VuexPersist from 'vuex-persist';


Vue.use(Vuex);

const vuexLocalStorage = new VuexPersist({
  key: 'vuex' // I WANT TO CHANGE THIS DYNAMICALLY, how to do that?
  storage: window.localStorage, // or window.sessionStorage or localForage
  // Function that passes the state and returns the state with only the objects you want to store.
  // reducer: state => state,
  // Function that passes a mutation and lets you decide if it should update the state in localStorage.
  // filter: mutation => (true)
})

const store = new Vuex.Store({
  ...
  plugins: [vuexLocalStorage.plugin]
});

...

new Vue({
  store,
  el: '#app',
  render: h => h(App)
});

question from:https://stackoverflow.com/questions/65623686/how-to-change-the-vuex-persist-key-option-dynamically

Answer 1

Waitting for answers