Plain objects states are reset during HMR

[CyberAP]

Reproduction

https://codesandbox.io/p/devbox/competent-feather-24dw95

Steps to reproduce the bug

1. Create a store with object state and an action
2. Change that state in component through interaction
3. Update your action's code
4. Observe that the state was reset to a default one

Expected behavior

State should be preserved.

Actual behavior

State is reset to a default value.

Additional information

The bug happens with Vue 2 and Vite. Not sure if it also applies to Vue 3 due to different reactivity systems.

Screen.Recording.2025-03-10.at.11.57.47.mov

[posva]

I cannot reproduce with updated dependencies locally. This might be an issue with Vue 2 (deprecated), in which case, you will need to check for Vue 2 support

[CyberAP]

@posva how did you reproduce? I forked the codesandbox to use Vue 3 + latest Pinia. Issue is still there.

Screen.Recording.2025-03-10.at.13.02.24.mov

[posva]

I tested locally with an empty vite project pnpm create vue with both setup and option stores. It does work with numbers and Maps but you are right, it doesn't work with an object like in your example.

It might not be feasible to keep everything consistent with this case but feel free to give it a try! check the store.ts file and search for the _hotUpdate function

[lukeupup]

I actually think the problem is related to patchObject, which explictly claims "It will remove any key not existing in newState and recursively merge plain objects." in the JSDoc.

When there's a state with initial value {}, the newStateTarget is always {}

And patchObject will not assign the values from oldState, since the newState has no key.

The current workaround is to make sure all the keys exist during store initialization, however, it's not always feasible.

I am not sure why patchObject need to work in this way. Can we allow new values from the old state at least on a single state?