Question: how to persist state?

[BonBonSlick]

Hello, and thatnks for that package. There is a comment on persistence. https://github.com/gertqin/vuex-class-modules/issues/24

State persisted only before the page reloaded. After that, it throws an error

 vue-devtools  Detected Vue v2.6.14 
 {FormWithVerification: accessor {SET_STEP: ...}
 {testVal_1: 'original_val'} // call getter
// call action with mutation within
 {testVal_1: 'mutated_val'} // call getter

// RELOAD PAGE OR REOPEN TAB (SPA)

 {FormWithVerification: accessor {SET_STEP: ...} // same
 {testVal_1: undefined} // call getter
// call action with mutation within throws
unknown action type: FormWithVerificationModule/changeVal
 {testVal_1: undefined} // call getter

I also see state in dev tools, BUT, getters are removed / actions. Sate not persisted nor dynamic modules registered again. Its like they were loaded only on the first-page load.

    "vue": "^2.6.14",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "vuex": "^3.0.1",
    "vuex-class": "^0.3.2",
    "vuex-class-modules": "^1.3.0",
    "vuex-multi-tab-state": "^1.0.16",
    "vuex-persistedstate": "^3.2.0",

import Vuex, {ModuleTree}                               from 'vuex';
import Vue                                              from 'vue';

'use strict';
import createPersistedState from 'vuex-persistedstate';
import createMultiTabState  from 'vuex-multi-tab-state';
import SecureLS from 'secure-ls';

const encryptedLocalStorage = new SecureLS(
    {
        encodingType:     'aes',
        encryptionSecret: '****',
        isCompression:    false,
    },
);

const plugins = [
    createMultiTabState(),
    createPersistedState({
                             storage: {
                                 getItem:    key => encryptedLocalStorage.get(key),
                                 setItem:    (key, value) => encryptedLocalStorage.set(key, value),
                                 removeItem: key => encryptedLocalStorage.remove(key),
                             },
                         }),
];

export default plugins;

Vue.use(Vuex);
const store = new Vuex.Store({
        strict:   'production' !== process.env.NODE_ENV,
        devtools: 'production' !== process.env.NODE_ENV,
        modules,
        plugins,
    },
);

export default store;

So, plugins createMultiTabState(), createPersistedState() are not working, reloading page does not register modules again and makes them unavailable for usage. state resets, getters / actions removed. Trying to register module again it says module already exists.

Any advice, guidance appreciated. Maybe add some docs on that. Because cant find in this package such must have feature. Was thinking to add some beforeDestroy(){} listener or something that will save whole state in local storage, but thats definetely not enough, we need to serialize, encrypt, then restore it back when tab, browser opened or page reloaded. Thanks!

[BonBonSlick]

Found fork where added preserveState because it is a MUST feature. Unsure of possible bugs.

https://github.com/voltane/vuex-class-modules/commit/6bd6af928dae4cabc2ba7366c963b81f7ff81909

I am creating a fork to test it. Please if you have any advice on how to preserve state for this package, update this ticket with package docs.
Thanks!

[bodograumann]

Feel free to create a pull request, but please stop spamming your comments in all vaguely related places.

[BonBonSlick]

@bodograumann this is not spam but a link to a related issue. Don't you think that anyone who has a similar persistence issue should see this one ticket? Your package is awesome because resolves many maintainability issues, like reusability, debugging, boilerplate code. Unlike vuex-class or vuex-module-decorators, first one brings hell as many boilerplate and the second one still has no inheritance. The first issue for inheritance was created ~2-3 years ago, one of them by me ~1.5 yrs ago when I just started to use Vue. Unfortunately, have not enough time for open source projects, because it's an unknown amount of time to figure out how they work under the hood. My main is back so it takes more time to debug client side :) Please, if you thinks some of my messages were spam and not relative, tell me, I can remove them. Project where I use this package contains dozens of modules so fo now I can verify that state is persisted. Original error after SPA page reloaded or tab reopened, DISAPPEARED, dynamic modules state, getters, actions PERSISTED. But, still need to test it, I will continue to migrate store to this package (my fork) as it seems solves all the problems in big monolithic store faced at this moment. https://github.com/BonBonSlick/vuex-class-modules/commits/master

Thanks a lot! :)