Как заставить аддон Storybook работать с дополнительными ссылками на Vue.js?

Я пытаюсь узнать, как использовать Storybook для своего проекта, который использует Vue.js, и я не могу заставить работать аддон addon-links, поскольку документация в основном находится в React.

Я установил

npm i --save @storybook/vue
npm i --save [email protected]
npm i --save @storybook/addon-actions
npm i --save @storybook/addon-links

Аддон addon-actions работает.

Для «дополнительных ссылок» я использовал различные примеры в сети, вот один из них.

import Vue from 'vue'
import { storiesOf } from '@storybook/vue'

import { linkTo } from '@storybook/addon-links'

...

storiesOf('Button', module)
  .add('First', () => ({
    template: `<button @click="action">Go to "Second"</button>`,
    methods: {
      action: () => {
        console.log('Go to "Second"')
        linkTo('Button', 'Second')
      }
    }
  }))
  .add('Second', () => ({
    template: `<button @click="action">Go to "First"</button>`,
    methods: {
      action: () => {
        console.log('Go to "First"')
        linkTo('Button', 'First')
      }
    }
  }))

package.json

{
  "private": true,
  "scripts": {
    ...
    "storybook": "start-storybook -p 9001 -c .storybook"
  },
"dependencies": {
    "@fortawesome/fontawesome": "^1.1.1",
    "@fortawesome/fontawesome-free-brands": "^5.0.3",
    "@fortawesome/fontawesome-free-regular": "^5.0.3",
    "@fortawesome/fontawesome-free-solid": "^5.0.3",
    "@fortawesome/vue-fontawesome": "^0.0.22",
    "@storybook/addon-console": "^1.0.0",
    "@storybook/addon-knobs": "^3.3.11",
    "axios": "^0.17.1",
    "bootstrap": "^4.0.0",
    "jquery": "^3.3.1",
    "js-cookie": "^2.2.0",
    "json-server": "^0.12.1",
    "popper.js": "^1.12.9",
    "sweetalert2": "^7.3.5",
    "vform": "^0.8.1",
    "vue": "^2.5.13",
    "vue-i18n": "^7.3.4",
    "vue-loader": "^13.6.1",
    "vue-meta": "^1.4.2",
    "vue-router": "^3.0.1",
    "vuetable-2": "^1.7.2",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.3.11",
    "@storybook/addon-links": "^3.3.11",
    "@storybook/addon-notes": "^3.3.11",
    "@storybook/vue": "^3.3.11",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "cross-env": "^5.1.0",
    "eslint": "^4.15.0",
    "eslint-plugin-vue-libs": "^2.1.0",
    "laravel-mix": "^1.7.2",
    "vue-template-compiler": "^2.5.13",
    "webpack-bundle-analyzer": "^2.9.2"
  }
}

console.log работает. Пользовательский интерфейс Storybook работает, и кнопка генерирует событие, но не переходит к следующему рассказу с помощью linkto.

Может ли кто-нибудь помочь мне с этим?


vue.js vuejs2 storybook
person Vlad    schedule 30.01.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

После установки без команды getstorybook связанные кнопки работают у меня с

methods: {
  action: linkTo('Button', 'Second') 
}

и это работает

methods: {
  action: linkTo('Button', (e) => {
    console.log('Go to "Second"')
    return 'Second';
  }) 
}

но не это

methods: {
  action: () => {
    console.log('Go to "Second"')
    linkTo('Button', 'Second')
  }
}

Установка из Storybook for Vue,

  • npm я --save-dev @ сборник рассказов / vue
  • npm я - сохранить vue
  • npm я --save-dev babel-core

из этого вопроса

  • npm i --save [email protected]
  • npm я --save-dev @ storybook / addon-actions
  • npm я --save-dev @ storybook / addon-links

после некоторых ошибок компиляции

  • npm я --save-dev vue-template-compiler
  • npm я - сохранить vuex

Это мой .storybook / addons.js

import '@storybook/addon-actions/register'
import '@storybook/addon-links/register'

Это мой .storybook / config.js

import { configure } from '@storybook/vue'

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

function loadStories() {
  require('../src/stories')
}

configure(loadStories, module)

Это мой src / stories / index.js

import { storiesOf } from '@storybook/vue';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

storiesOf('Button', module)
  .add('First', () => ({
    template: `<button @click="action">Go to "Second"</button>`,
    methods: {
      action: linkTo('Button', 'Second') 
    }
  }))
  .add('Second', () => ({
    template: `<button @click="action">Go to "First"</button>`,
    methods: { 
      action: linkTo('Button', 'First') 
    }
  }))
person Richard Matsen    schedule 30.01.2018
comment
Спасибо за ваш ответ. В примере, который я использую, нет никаких других компонентов, только простая кнопка HTML, поэтому нет необходимости в components: { MyButton }. Я все равно попробовал, чтобы быть абсолютно уверенным, но это не сработало. Аддон в примерах, которые я видел, похоже, работает для чистого Vue.js, поэтому React.js не нужен. Я пробовал использовать другой синтаксис функций / методов, и это тоже не сработало. Есть идеи о других возможных проблемах? - person Vlad; 31.01.2018
comment
На самом деле мои первая и вторая кнопки работают нормально без атрибута components. Я предположил, что это было необходимо, потому что примеры (первые 3 кнопки выше) показывают это. Я совершенно упустил из виду тот факт, что <button> не является селектором для компонента MyButton. - person Richard Matsen; 31.01.2018
comment
Единственный другой фактор, который кажется важным, - это метод установки Storybook. - person Richard Matsen; 31.01.2018
comment
Мне удалось заставить работать следующие аддоны: Actions, Knobs, Notes, Console все с аналогичной установкой. Единственное, что просто не работает, это аддон Links. - person Vlad; 31.01.2018
comment
Если я последую за вашей установкой, я не смогу скомпилировать раскадровку. Вы пропустили какие-то шаги? - person Richard Matsen; 31.01.2018
comment
npm i --save vue npm i --save-dev babel-core после npm i --save-dev @storybook/vue - person Vlad; 31.01.2018
comment
Их было несколько - изначально было связано с отсутствующими установками, последнее сообщение было довольно неясным. Я начал с проекта vue-cli, так что теперь я закончу, действуя строго в соответствии с вашими шагами. - person Richard Matsen; 31.01.2018

arrow_upward
0
arrow_downward

С новым форматом компонентной истории (CSF) я нашел способ делать то, о чем вы просите.

    export const myStory = () => ({
      components: { MyComponent },
      template: `<div style="width: 640px">
        <my-component :my-data="myData" @updated="updated" />
      </div>`,
      data() {
        return {
          myData: null,
        }
      },
      methods: {
        action: action('data-updated'),            // define the raw action
        updated($event) {
          this.myData = $event;                 // alter your data locally
          this.action($event);                      // call the raw action using a method
        }
      }
    });

Это потребовало немалых усилий, но я сделал это именно так.

person user1628627    schedule 09.03.2020