Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In my project, I utilize Storybook for page development. The setup looks like this:

As you can see, two applications are displayed simultaneously within a single story. Each application has its own isolated logic layer.
I've implemented the logic layer using Pinia. However, to maintain isolation between the applications, I needed a way to create separate Pinia instances. To achieve this, I leveraged Vue's provide/inject system.
Here's how I implemented the Pinia provider:
typescript
and I use it like this
This approach allows me to create distinct Pinia instances for each application, ensuring that their state management remains isolated.
The reason I need Pinia to export the piniaSymbol is to use it as a key when providing the Pinia instance. This symbol serves as a unique identifier, allowing me to inject the correct Pinia instance into each application context."
This refined version provides a clearer explanation of your setup, the problem you were solving, and how you implemented the solution using Vue's provide/inject system and Pinia's piniaSymbol.
My English is not very good, but I hope you can understand the meaning I'm trying to convey.