How to use storybook with pinia

[Stygmates]

Good afternoon,
As Pinia is now the recommended store for vue3, I can't find examples on how to use it with storybook.
Did someone manage to make it work?

[romanslonov]

It's simple. Just init pinia store in .storybook/preview.js as you usually do it in vue app (v3).

// .storybook/preview.js

import { app } from '@storybook/vue3';
import { createPinia } from 'pinia';

const pinia = createPinia();

app.use(pinia);

[iambumblehead]

how do we attach different pinia states storybook controls?

[elenakout]

Is there an example for attaching different pinia states to storybook controls?

[mukhrr]

as far as I know docs has changed since this answer

[JoJk0]

Docs don't include the manipulation of the state inside Pinia within component. They only include workaround to decouple Pinia into parent component and pass the state to the child through props. This is not ideal as for large applications, it involves a lot of prop drilling.

[Stygmates]

Storybook documentation has been updated to show how to use pinia with storybook: https://storybook.js.org/tutorials/intro-to-storybook/vue/en/data/