Skip to content

docs(core): explain how to create dynamic store instances using defin… #3056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

docs(core): explain how to create dynamic store instances using defin… #3056

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions packages/docs/core-concepts/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,3 +171,35 @@ const { name, doubleCount } = storeToRefs(store)
const { increment } = store
</script>
```

## Dynamic Store IDs

In some cases, you may want multiple independent instances of the same store (e.g. one per document, chat room, or session). You can do this by generating a dynamic store ID:

```ts
export const useBroadcastStore = (id?: string) =>
defineStore(`BroadcastStore-${id}`, {
Copy link
Member

@posva posva Nov 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is actually not good because it re defines the same store over and over and it's not expected behavior 😅

I see this behavior of trying to reuse a store a lot of times but it shouldn't be this way, it should have a collection within the store and then within a composable use that store and pass the other arguments

Copy link
Member

@posva posva Nov 1, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a ticket to the roadmap to not forget about this, thanks for the PR thought! 🙏

Copy link
Author

@hdJerry hdJerry Nov 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is actually not good because it re defines the same store over and over and it's not expected behavior 😅

I see this behavior of trying to reuse a store a lot of times but it shouldn't be this way, it should have a collection within the store and then within a composable use that store and pass the other arguments

That's quite interesting, I was thinking I was being smart. Lol. What's the issue with this approach?

state: () => ({ messages: [] }),
actions: {
addMessage(msg) {
this.messages.push(msg)
},
},
})()
```

Each call creates an independent store:

```ts
const roomA = useBroadcastStore('a')
const roomB = useBroadcastStore('b')

roomA.addMessage('Hello A')
roomB.addMessage('Hello B')

console.log(roomA.messages) // ['Hello A']
console.log(roomB.messages) // ['Hello B']
```

This pattern allows for unique, isolated stores that share the same structure.