Skip to content

Allow changing pinia root store for component scope #870

Open
@bodograumann

Description

What problem is this solving

When documenting a component with storybook and its docs addon, multiple stories are rendered in one MDX document. That means they are technically part of the same Vue application.
Semantically however, each story represents a very specific state of the component. Usually these components would not access any global state (and thus pinia) at all, but sometimes it is necessary. That means each of the story components needs its own, independant “global” state.

Proposed solution

Pinia should allow to change the root store Pinia instance which is injected into a component and its descendents.
Technically this could be done simply by exposing the piniaSymbol and than I could use provide(piniaSymbol, createPinia()).

On the other hand it might be more prudent to keep the symbol private and expose a convenience function providePinia(pinia) { provide(piniaSymbol, pinia ?? createPinia()) }.

Describe alternatives you've considered

It is also possible to patch alias fields into the storybook webpack config and mock the store definition module which provides the useMyStore function for each store individually. Then each story could set a currentMock property in those modules.
This would be much more complex however, harder to understand and possibly fragile.

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    • Status

      📋 Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions