store.registerModule overwrites persisted state

Consider this example code:

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

import user from './user.js';
store.registerModule('user', user);

This will load the persisted state from localStorage (or other) and then it will be overwritten by the state defined in the “user” module. I think I understand why this is happening, but a small warning about this in the documentation could come in handy for some people.

This on the other hand will work fine:

import user from './user.js';

const store = new Vuex.Store({
  modules: {
    user
  },
  plugins: [createPersistedState(persistedStateOptions)]
});

I can use the latter in my project, but I started out with the first implementation and spent some time finding out what prevented the persisted state from being restored.

[japboy]

just wondering if there are any possibility to support to restore state from dynamic module registration…? my vuex structure heavily depends on dynamic module and it would be great if restoring the state is possible 😄

[salam0smy]

This is how I got it to work with dynamic modules:

if (!DiscoveryStoreModule.registered) {
        store.registerModule('discovery', DiscoveryStoreModule, {
          preserveState: !!store.state['discovery'],
        });
        DiscoveryStoreModule.registered = true;
}

Two things to note here: When the state is restored you will need to pass preserveState: true so that you don’t override the persisted state. And to avoid registering the module twice you can add a customProp to the module object DiscoveryStoreModule.registered