`registerModule` resets the sub-state of the module being registered

[sirlancelot]

Version

2.3.0

Reproduction link

https://codepen.io/sirlancelot/pen/EmOxWZ

Steps to reproduce

Suppose you have a SPA-style app with Vue, Vuex, and Vue-Router, with a Vuex module for each page. The Vuex module gets registered during router.beforeResolve on both server & client.

Both the server & client will render the page properly. However, when loading the page fresh in the browser, it seems that registerModule is resetting the module's sub-state upon registration.

What is expected?

When Vuex is registering modules, it should see if that sub-state already exists in its store and use that instead of starting fresh.

What is actually happening?

It seems that the module's sub-state is getting cleared during registerModule phase in the browser.

---

I hacked together the repro steps without Vue-Router because it's not strictly part of the problem. I tried to explain at what point portions of code run. Let me know if you need more explanation.

[ktsn]

Maybe we can add a third argument of flag to prevent override the existing state for hydration?

registerModule(path: string | Array<string>, module: Module, hydration?: boolean)

[sirlancelot]

^ Sounds good to me!

I currently do something like this as a workaround:

// On a route component...
function beforeRouteEnter(to, from, next) {
	patchDefinitionWithCurrentState(definition, store.state[namespace])
	store.registerModule(namespace, definition)
}

function patchDefinitionWithCurrentState(definition, currentState) {
	if (!currentState) return

	const originalState = definition.state

	// Vuex will call this function which will return the definition back to its
	// original state but will provide the currentState back to Vuex.
	definition.state = () => {
		definition.state = originalState
		return currentState
	}
}

[mAAdhaTTah]

Ran into this issue myself. Would be really cool if the module's state (could) provide defaults for any undefined values.

[sirlancelot]

I revised my function to provide defaults like so:

function patchDefinitionWithCurrentState(definition, currentState) {
	if (!currentState) return

	const state = definition.state

	// Vuex will call this function which will return the definition back to its
	// original state but will provide the currentState back to Vuex.
	definition.state = () => {
		const defaultState = typeof state === "function" ? state() : state
		definition.state = state
		return { ...defaultState, ...currentState }
	}
}

[mAAdhaTTah]

@sirlancelot If you've got changes for this to work, can you open a PR for it? Would love this feature.