Using submodules and serialization

[francis-switcho]

Hi, I saw this discussion here regarding store splitting and am currently struggling with serialization (JSON.stringify) due to this approach.

My use case is:
I have a store made by "assembling" smaller stores e.g. something similar to this (playground)
I want to serialize and persist it (similar to what the persisted state plugin does)

Unfortunately I can't repro this on the playground, but I'll try and explain myself.

I am observing (on Vue 2.7.16, currently planning migration to 3) the same behaviour as described in #1149 , that is in dev mode no problem arises whereas in production JSON.stringify throws because of a circular structure.
This clearly happens because, even though I serialize the parent store.$state, the single members of this state are pointing to full store instances.

I believe this is what's preventing the error in dev mode (since the circular references appear to be under the _p property).

I managed to resolve this by omitting the _p property completely while serializing via the replacer function parameter in JSON.stringify but it doesn't feel like a solid approach.

Therefore I have some questions:

• Is this intended behavior, AKA is the way I'm "composing" the parent store wrong? E.g. Should I instead destruct inner stores (e.g. via storeToRefs) and expose only their state properties in the parent store?
• Is this somehow related to being on Vue 2 instead of Vue 3?

Thank you very much

Francis

[posva]

The issue in the playground is that the main store is returning the other stores. That creates state duplication and other other serialization issues. The solution is simple: do not return other stores (or their state) from a store.