vue.js - 是否可以在故​​事书装饰器中访问故事的数据？

Question

在 Vue.js 中，我有一系列具有 v-model 的自定义输入组件。在 Storybook 中，我想在我的故事中添加一个 decorator 以显示我的自定义输入的当前值，如何访问 decorator 上的组件数据？

这是 TextField.stories.js 故事:

import TextField from 'TextField';
import decorator from 'decorator';

export default {
    title: 'Example/TextField',
    component: TextField,
    decorators: [decorator],
    argTypes: {
        update: { action: 'update' },
        // value: { control: { type: 'text' } },
    },
};

const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { TextField },
    template: '<text-field v-model="value" @update="update" v-bind="$props" />',
    data() {
        return {
            value: 'foo bar',
        };
    },
});

export const Simple = Template.bind({});
Simple.args = {
    label: 'Simple Text Field',
};

这是decorator.js，我想从这里的故事中访问值:

export default () => ({
    template: '<div class="m-5"><story /><pre class="bg-secondary mt-5 p-4">{{ value }}</pre></div>',
});

Answer 1

您可以从全局装饰器访问单个故事的参数:

// preview.js:
export const decorators = [(storyFn, context) => {
  const { label, ...otherArgs } = context.args;

  // use in decorator output
}]

然后以 CSF 格式:

export const MyStory = ({ label, ...otherArgs }) => { ... }
MyStory.args = {
   label: 'whatever',
   // etc.
}