feat: preserve state with registerModule

[blake-newman]

As speaking with @TheLarkInn we where saying it would be awesome to be able to register a module dynamically to be able to code split the store in a large application.

It is totally possible with store.registerModule('a', module). Here is an example, if using hooks to ensure prevent the route loading. This can be achieved with asyncData with client mixins and global hooks. https://ssr.vuejs.org/en/data.html

export default {
  async asyncData ({ registerModule, dispatch }) {
    registerModule('a', await import('@/store/modules/a'))
    dispatch('a/action')
  }
}

The issue with this with SSR this would replace the pre-populated data. This pull request aims to fix this scenario.

[ktsn]

LGTM 👍

[ktsn]

This would fix #789

[blake-newman]

Awesome, had this in my mind for months just forgot about it.

[TheLarkInn]

does this mean you could pass the import directly also?

this.$store.replaceModule('a', import('@/store/modules/a'))

or similar to Vue.use that it is a fn that returns the Promise<module>?

this.$store.replaceModule('a', () => import('@/store/modules/a'))

[blake-newman]

Not yet! This is my next thing to do. Small things at a time haha!

[TheLarkInn]

😎 np cheers on this addition for SSR

[andreiglingeanu]

🤘

[blake-newman]

@TheLarkInn I'm going to go with the latter, as it will require less code in Vuex and a simple integration. Also doesn't require the need to do custom waiting mechanisms for promise to resolve.

[TheLarkInn]

So like this?

this.$store.replaceModule('a', () => import('@/store/modules/a'))

[blake-newman]

yes but it is registerModule

[blake-newman]

/ping @vuejs/collaborators