storybook+vue3でpiniaを使う

はじめに

こんばんは。

仕事でstorybookを使う機会があり、piniaも同時に使うパターンが有り、色々調べた結果の備忘録です。

本題

やることは簡単で、以下を設定するだけ

// preview.js

import { app } from '@storybook/vue3'
import { createPinia } from 'pinia'
app.use(createPinia())


export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

また、stateにデフォルトの値を設定する場合は以下みたいな感じ。

// preview.js


import { app } from '@storybook/vue3'
import { createPinia } from 'pinia'
app.use(createPinia())


const itemStore = ItemStore()
itemStore.$patch({
  items: // ここにデフォルト値を設定
})


export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

終わりに

以外に簡単でした。

一旦以上です。