feat: export piniaSymbol

[cexoso]

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

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.

[netlify[bot]]

✅ Deploy Preview for pinia-official canceled.

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

[posva]

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]

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?