Skip to content

feat: export piniaSymbol #2973

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.

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

Open
wants to merge 1 commit into
base: v3
Choose a base branch
from
Open

feat: export piniaSymbol #2973

wants to merge 1 commit into from

Conversation

cexoso
Copy link

@cexoso cexoso commented Apr 16, 2025

In my project, I utilize Storybook for page development. The setup looks like this:
image

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

import { createPinia, piniaSymbol } from 'pinia';

export const PiniaProvider = defineComponent({
  name: 'PiniaProvider',
  props: {
    script: {
      type: Function,
    },
  },
  provide() {
    const pinia = createPinia();
    return {
      [piniaSymbol]: pinia,
    };
  },
  setup(props, context) {
    return () => (
      <ScriptExecutor script={props.script}>
        {context.slots.default ? context.slots.default() : null}
      </ScriptExecutor>
    );
  },
});

and I use it like this

// Storybook story 文件
export const TwoAppsStory = () => (
  <div class="app-container">
    <PiniaProvider script={initSciprt1}>
      <App />
    </PiniaProvider>

    <PiniaProvider script={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.

Copy link

netlify bot commented Apr 16, 2025

Deploy Preview for pinia-official canceled.

Name Link
🔨 Latest commit 6a136f9
🔍 Latest deploy log https://app.netlify.com/sites/pinia-official/deploys/67ff959578a30b00081178cf

@posva
Copy link
Member

posva commented Apr 16, 2025

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

@cexoso
Copy link
Author

cexoso commented Apr 17, 2025

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants