【Storybook】vuexを導入する

Storybook for Vue を利用している

https://storybook.js.org/docs/guides/guide-vue/

このstorybookにvuexを導入したい

導入方法

ドキュメントより

preview.js

import { configure } from '@storybook/vue';

import Vue from 'vue';

// Import Vue plugins
import Vuex from 'vuex';

// Import your global components.
import Mybutton from '../src/stories/Button.vue';

// Install Vue plugins.
Vue.use(Vuex);

// Register global components.
Vue.component('my-button', Mybutton);

configure(require.context('../src', true, /\.stories\.js$/), module);

stories.js

import Vue from 'vue';
import MyButton from './Button.vue';

export default { title: 'Button' };

export const withText = () => '<my-button>with text</my-button>';

export const withEmoji = () => '<my-button>😀 😎 👍 💯</my-button>';

export const asAComponent = () => ({
  components: { MyButton },
  store: new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    }
  })
  template: '<my-button :rounded="true">rounded</my-button>'
});

参考

https://vuex.vuejs.org/ja/guide/