【Nuxt.js】VuexをStorybookで使う方法 | 頑張ることをやめたら人生楽しくなった

【Nuxt.js】VuexをStorybookで使う方法

Nuxt.jsVuex を使ってコンポーネント間でデータの受け渡しができるようにしました。
ところが 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にすべきだったか…」と心が折れそうになりました。

しかし、できなかったことができるようになると快感ですね。

フォローお願いします