Как заставить магазин Vuex работать с Storybook? - PullRequest
Новая
       36

Как заставить магазин Vuex работать с Storybook?

1 голос
/ 20 июня 2019

У меня есть история компонента, которая требует вызова API, выполняемого ACTION из моего магазина Vuex.Тем не менее, Storybook не может найти магазин: Unhandled promise rejection TypeError: "this.$store is undefined".

Я пытался получить доступ к магазину через хуки жизненного цикла created и mounted Vue, но каждый из них возвращал undefined.

Мой магазин Vuex правильно работает внутри моего приложения.

Я работаю на сборнике рассказов 5.0.1 и vuex 3.1.1.

Вот мой сборник рассказов config.js: 

// Taken from https://davidwalsh.name/storybook-nuxt & 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) => req(filename))
}

configure(loadStories, module);

Вот история моего компонента: 

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', () => {
    /* eslint-disable */
    return {
      components: { HandoffMainView },
      data() {
        return {
          isLoading: true,
          component: {
            src: '',
            data: [],
          },
        };
      },
      template: '<handoff-main-view :component="component" />',
    };
  });

Вот мой компонент: 

<template>
  <main class="o-handoff-main-view">
    <div class="o-handoff-main-view__content">
      <div
        :class="[
          'o-handoff-main-view__background',
          background ? `o-handoff-main-view__background--${background}` : false
        ]"
      >  
        <loader
          v-if="isLoading"
          :color='`black`'
          class="o-handoff-main-view__loader"
        />
        <div
          v-else
          class="o-handoff-main-view__ui-component"
          :style="getUiComponentStyle"
        >
          <img
            :src="uiComponent.src"
            alt=""
          >
          <handoff-main-view-layer-list
            :layers="uiComponent.data"
          />
        </div>
      </div>
    </div>
    <div class="o-handoff-main-view__controls">
      <handoff-main-view-zoom-handler
        :default-zoom-level="zoomLevel"
        :on-change="updateZoomLevel"
      />
    </div>
  </main>
</template>

<script>
  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 = () => {
          this.isLoading = false;
        };
        uiComponentImg.src = this.uiComponent.src;
      },
    },
  };
</script>

1 Ответ

0 голосов
/ 20 июня 2019

Бьюсь об заклад, где-то в вашем приложении, вероятно, main.js, вы делаете что-то вроде: 

import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state,
  mutations,
  getters,
});

А затем, при создании приложения Vue, ваш вызов new Vue({store, i18n...}).

Вы уже подделываете Vue с помощью модуля 'i18n' в вашем config.js.Вам нужно будет импортировать Vuex и магазин туда же.

Теперь необходимость импортировать свой магазин - или макетировать - в настройках сборника рассказов может быть запахом слишком больших компонентов илислишком тесно связан с вашим магазином.

Обычно сборник рассказов больше предназначен для показа компонентов, которые отображают элементы (элементы управления формой, список вещей ...), которые имеют выделенную функциональность.Такие компоненты обычно связываются с остальной частью вашего приложения через реквизиты и события.Давайте назовем это презентационными компонентами.

Напротив, компоненты, которые взаимодействуют с хранилищем, обычно являются представлениями или страницами, и они управляют состоянием, взаимодействуют с бэкэндом и предоставляют данные для первого.

Я думаю, что вы должны отображать в сборнике рассказов только презентационные компоненты и избегать использования в них глобальных модулей.По крайней мере, я верю, что именно этот дух лежит в основе сборника рассказов и как он в основном используется.Это может быть причиной того, что вы не найдете много документов о том, как издеваться над вашим магазином в сборнике рассказов: проекты сборников рассказов обычно не подключаются к vuex, я думаю.

...