You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
// Storybook story 文件exportconstTwoAppsStory=()=>(<divclass="app-container"><PiniaProviderscript={initSciprt1}><App/></PiniaProvider><PiniaProviderscript={initSciprt2}><App/></PiniaProvider></div>)
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.
Is this related to #870 ?
We could expose the symbol as an internal property (could change between versions) and it would fix your issue but note that it would still fail in a few scenarios
Is this related to #870 ? We could expose the symbol as an internal property (could change between versions) and it would fix your issue but note that it would still fail in a few scenarios
Yes, I found my comment on this issue #870 from 2022, and I see it's still open.
I notice the code below
const piniaSymbol = ((process.env.NODE_ENV !== 'production') ? Symbol('pinia') : /* istanbul ignore next */ Symbol());
you can just change Symbol('pinia') to Symbol.for('pinia').
Symbol.for('pinia') allow developer overwrite the Provide by using Vue's provider with the Symbol.for('pinia')
(because Symbol.for('pinia') equal Symbol.for('pinia'))
or export const piniaSymbol
So, do you have any plans to expose piniaSymbol or other resolve methods?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.