Storybook + Vue 3 + Vuexを使う方法

Vue3のコンポーネントかつVuexのストアへのアクセスのあるコンポーネントをStorybookで描画する際にあまりドキュメントがなかったので、備忘録としてメモっときます。

storybook vuexとかでググるとStack Overflowの記事などもでてきますがどれもvue.use(Vuex)を用いるvue2向けの手法や現在storybookではdeprecated になっているconfig.jsを用いるものばかりでした。

Storybookの公式ではPiniaを用いたケースしか載っておらず、Piniaは型推論も効きますし便利ではありますが、Storybookでコンポーネントやページのデザイン検証が必要な規模のプロジェクトはまだまだVuex使っているところも多い気がします。そんな人々の助けになればと。

.storybook/preview.ts

import type { Preview } from "@storybook/vue3"
import { setup } from "@storybook/vue3";
import { createStore } from "vuex"
const store = createStore({hogehoge})
setup(app => {app.use(store)})

const preview: Preview = {
  ...
}

これでthis.$store への参照をStorybook内でレンダリングされたコンポーネントでも行うことができコミットなどのミューテーションも行うことができます。