Allow changing pinia root store for component scope #870
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
Labels
Type
Projects
Status
📋 Backlog