Several stores with on element or one store with several elements?

[hugoattal]

I'm building a kind of editor with various features (creation of some elements, selection, etc...)
I built a store for that editor because there's a lot of things interacting with other things.

But I now want to display several editors on the same page.

What would be the best approach?

Something like this (create several stores "on the fly")

export const useMyStore = (uuid: string) => {
    return defineStore({
        id: `my-store-${uuid}`,
        actions: {
            doThing(data: any) {
                this.myStuff = data;
            }
        },
        state: () => ({
            myStuff: any
        })
    });
}

Or something like this (create an object with several elements and pass the ID at each action/getter call)

export const useMyStore = defineStore({
    id: "my-store",
    actions: {
        doThing(uuid: string, data: any) {
            this.myStuffs[uuid] = data;
        }
    },
    state: () => ({
        myStuffs: Record<string, any>
    })
});

Thank you very much 🙂!

(Btw I really love Pinia, 1000x better that Vuex, kudos to the dev ❤️!)

[posva]

I personally prefer the second one but in some scenarios, creating dynamic stores is more convenient. You can dispose of them with store.$dispose()

[hugoattal]

Thank you very much! I think I'll try the first one for convenience, I'll do the second if I come across some limitations.

Thanks for the $dispose function! I didn't know it existed, I don't think it's documented, I only found this:
#557