如何让 Storybook 插件 'addon-links' 为 Vue.js 工作？

Question

我正在尝试学习如何将 Storybook 用于我使用 Vue.js 的项目，但我似乎无法使插件 'addon-links' 工作，因为文档主要在 React 中。

我安装了

npm i --save @storybook/vue
npm i --save vue-loader@13.6.1
npm i --save @storybook/addon-actions
npm i --save @storybook/addon-links

插件 'addon-actions' 有效。

对于'addon-links'我在网上使用了各种例子，这里是其中之一。

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 UI 有效并且按钮生成事件但它不会使用 linkto.

更改为下一个故事

谁能帮我解决这个问题？

Answer 1

安装后 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 i --save-dev @storybook/vue
npm i --save vue
npm i --save-dev babel-core

来自这个问题

npm i --save vue-loader@13.6.1
npm i --save-dev @storybook/addon-actions
npm i --save-dev @storybook/addon-links

一些编译错误后

npm i --save-dev vue-template-compiler
npm i --save 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') 
    }
  }))

Answer 2

通过新的组件故事格式 (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
        }
      }
    });

这花了很多时间 - 但我就是这样做的。

如何让 Storybook 插件 'addon-links' 为 Vue.js 工作？

How to make Storybook addon 'addon-links' work for Vue.js?

vue.js

vuejs2

storybook