Nested reactive objects(hierarchy of objects, relations) in a pinia store

[chreniuc]

I was using composition API and I heard about Pinia and saw that it's the standard way and I switched over.

But I encountered multiple problems, one of them being that I couldn't have nested reactive objects inside a pinia store, in composition API I had the following structure of "stores":

• sitesStore which is an instance of Sites class, which contains a member of type Array<Site> + other properties and members
• Site is a class with contains a member of type Array<Event> + a member of type Array<Order> + other properties and members
• Event is a class with members and methods
• Order is a class with members and methods

In this case I created the sites object like this: ref(new Sites()) and it worked like a charm.

I switched to Pinia(because it is advertised as the standard way and it also works with devtools) and I ended up creating different stores for each and manually loading the stores, without having links between them:

• sitesStore -> because there is no way to have a getter with arguments(there is one, but only works in setup())
• siteStore -> loads the site from an API not from the sitesStore(because it woul've been a headache to update this one and also the one from sitesStore)
• eventsStore -> loads the events for the current site loaded in siteStore
• ordersStore -> loads the orders for the current site loaded in siteStore

The problem with this method, is that you need to make sure you call reset(using composition api, you also do not have access to $reset and you need to create a custom reset method) on all "child" stores. Eg, when the siteStore loads another site(on route change), you need to call reset on all children, eg: eventsStore, ordersStore which is also a headache, because you lose the cache of the previous site, so when you reopen that route, it has to call back the API...

Is there really no other way to do it? A cleaner way..