title: How can I make Vuex store work with Storybook?
body: <p>I have a component story that requires an API call performed by an ACTION from my Vuex store. However, the store can't be found by Storybook: <code>Unhandled promise rejection TypeError: "this.$store is undefined"</code>.</p>
  
  <p>I've tried to access the store through the <code>created</code> and <code>mounted</code> Vue lifecycle hooks but each of them returned <code>undefined</code>.</p>
  
  <p>My Vuex store is correctly working inside my app.</p>
  
  <p>I run on storybook <code>5.0.1</code> and vuex <code>3.1.1</code>.</p>
  
  <p>Here's my storybook <code>config.js</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Taken from https://davidwalsh.name/storybook-nuxt &amp; https://github.com/derekshull/nuxt-starter-kit-v2/blob/master/.storybook/config.js
  import { addParameters, configure } from '@storybook/vue';
  import { withOptions } from '@storybook/addon-options';
  import { setConsoleOptions } from '@storybook/addon-console';
  import { create } from '@storybook/theming';
  import Vue from 'vue';
  import VueI18n from 'vue-i18n';
  
  // Vue plugins
  Vue.use(VueI18n);
  
  setConsoleOptions({
    panelExclude: [],
  });
  
  // Option defaults:
  addParameters({
    options: {
      /**
       * show story component as full screen
       * @type {Boolean}
       */
      isFullScreen: false,
      /**
       * display panel that shows a list of stories
       * @type {Boolean}
       */
      showNav: true,
      /**
       * display panel that shows addon configurations
       * @type {Boolean}
       */
      showPanel: true,
      /**
       * where to show the addon panel
       * @type {String}
       */
      panelPosition: 'bottom',
      /**
       * sorts stories
       * @type {Boolean}
       */
      sortStoriesByKind: false,
      /**
       * regex for finding the hierarchy separator
       * @example:
       *   null - turn off hierarchy
       *   /\// - split by `/`
       *   /\./ - split by `.`
       *   /\/|\./ - split by `/` or `.`
       * @type {Regex}
       */
      hierarchySeparator: /\/|\./,
      /**
       * regex for finding the hierarchy root separator
       * @example:
       *   null - turn off multiple hierarchy roots
       *   /\|/ - split by `|`
       * @type {Regex}
       */
      hierarchyRootSeparator: /\|/,
      /**
       * sidebar tree animations
       * @type {Boolean}
       */
      sidebarAnimations: true,
      /**
       * enable/disable shortcuts
       * @type {Boolean}
       */
      enableShortcuts: true,
      /**
       * theme storybook, see link below
       */
      theme: create({
        base: 'light',
        brandTitle: '',
        brandUrl: '',
        // To control appearance:
        // brandImage: 'http://url.of/some.svg',
      }),
    },
  });
  
  const req = require.context('../src/components', true, /\.story\.js$/)
  
  function loadStories() {
    req.keys().forEach((filename) =&gt; req(filename))
  }
  
  configure(loadStories, module);
  </code></pre>
  
  <p>Here's my component's story:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { storiesOf } from '@storybook/vue';
  import { withReadme } from 'storybook-readme';
  import { withKnobs } from '@storybook/addon-knobs';
  import HandoffMainView from './HandoffMainView.vue';
  import readme from './README.md';
  
  storiesOf('HandoffMainView', module)
    .addDecorator(withReadme([readme]))
    .addDecorator(withKnobs)
    .add('Default', () =&gt; {
      /* eslint-disable */
      return {
        components: { HandoffMainView },
        data() {
          return {
            isLoading: true,
            component: {
              src: '',
              data: [],
            },
          };
        },
        template: '&lt;handoff-main-view :component="component" /&gt;',
      };
    });
  </code></pre>
  
  <p>Here's my component:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;main class="o-handoff-main-view"&gt;
      &lt;div class="o-handoff-main-view__content"&gt;
        &lt;div
          :class="[
            'o-handoff-main-view__background',
            background ? `o-handoff-main-view__background--${background}` : false
          ]"
        &gt;  
          &lt;loader
            v-if="isLoading"
            :color='`black`'
            class="o-handoff-main-view__loader"
          /&gt;
          &lt;div
            v-else
            class="o-handoff-main-view__ui-component"
            :style="getUiComponentStyle"
          &gt;
            &lt;img
              :src="uiComponent.src"
              alt=""
            &gt;
            &lt;handoff-main-view-layer-list
              :layers="uiComponent.data"
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="o-handoff-main-view__controls"&gt;
        &lt;handoff-main-view-zoom-handler
          :default-zoom-level="zoomLevel"
          :on-change="updateZoomLevel"
        /&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import { mapActions } from 'vuex';
    import Loader from '../../01-atoms/Loader/Loader.vue';
    import HandoffMainViewZoomHandler from '../HandoffMainViewZoomHandler/HandoffMainViewZoomHandler.vue';
    import HandoffMainViewLayerList from '../HandoffMainViewLayerList/HandoffMainViewLayerList.vue';
  
    export default {
      components: {
        Loader,
        HandoffMainViewZoomHandler,
        HandoffMainViewLayerList,
      },
      props: {
        background: {
          type: String,
          default: 'damier',
        },
        component: {
          type: Object,
          required: true,
        },
      },
      data() {
        return {
          isLoading: true,
          zoomLevel: 1,
          uiComponent: {
            src: null,
          }
        };
      },
      mounted() {
        this.setUiComponentImage();
      },
      methods: {
        ...mapActions('UiComponent', [
          'ACTION_LOAD_SIGNED_URLS'
        ]),
        async setUiComponentImage() {
          const uiComponentImg = new Image();
          const signedUrls = await this.ACTION_LOAD_SIGNED_URLS([this.component.id]);
          uiComponentImg.onload = () =&gt; {
            this.isLoading = false;
          };
          uiComponentImg.src = this.uiComponent.src;
        },
      },
    };
  &lt;/script&gt;
  </code></pre>