2019年11月1日
2020年11月2日
【Nuxt.js】VuexをStorybookで使う方法

Nuxt.js で Vuex を使ってコンポーネント間でデータの受け渡しができるようにしました。
ところが Storybook で以下のように記述しても Vuex が使えないとエラーが出てしまいます。
// component.stories.js
storiesOf('Store', module)
.add('The Component, () => ({
components: { TheComponent },
template: '<the-component />'
}))
そこでStorybookでもVuexが使えるようにしました。
設定
// .storyobook/config.js
import Vue from 'vue'
import Vuex from 'vuex' // <— 追加
import { configure } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
Vue.use(Vuex) // <— 追加
// 以下略
// component.stories.js
storiesOf('Store', module)
.add('The Component, () => ({
components: { TheComponent },
template: '<the-component />',
store: new Vuex.Store({ // <— Store モックを追記
modules: {
myData: {
namespaced: true,
state: {
data: {
message: 'ストアのデータだよ!'
}
},
getters: {
data: state => state.data
}
}
}
})
}))
以上です。
Storeモックを作ってあげることでStorybookでも正常に使えるようになりました。
あとがき
Nuxt.js を使った Storybook の事例や参考ページが少なくて非常に苦労しています。
ググるたびにReactの参考ページがたくさん表示されて「Reactにすべきだったか…」と心が折れそうになりました。
しかし、できなかったことができるようになると快感ですね。

フォローお願いします