如何在Storybook中通过枚举切换DataA与DataB两种JSON数据？

当前你的Storybook代码固定加载DataA，要实现使用者可选择加载DataA或DataB，可按以下方式修改：

修改思路 #

用下拉选择器替代原有的函数控件，让使用者直接选择数据源类型，再根据选择动态生成对应的getData函数。

修改后的完整代码 #

import dataA from "../__fixtures__/dataA.json";
import dataB from "../__fixtures__/dataB.json";

export default {
    component: ParentComponent,
    argTypes: {
        dataSource: {
            control: "select",
            options: ["DataA", "DataB"],
            defaultValue: "DataA",
            description: "选择要加载的数据源"
        },
    },
    args: {
        dataSource: "DataA",
    },
};

export const Default = (args) => ({
    components: { ParentComponent }, // 修正原代码拼写错误：ParentComopnent → ParentComponent
    setup() {
        // 根据选中的数据源生成对应的getData函数
        const getData = () => new Promise((resolve) => 
            setTimeout(() => resolve({ 
                data: args.dataSource === "DataA" ? dataA : dataB 
            }))
        );
        return { getData };
    },
    template: `
        <ParentComponent
            :getData="getData"
        />
    `,
});

关键修改点说明 #

1. 新增数据源选择控件：在argTypes中定义dataSource参数，使用select类型，提供"DataA"和"DataB"两个选项，默认选中DataA，保持原有默认行为。
2. 动态生成getData函数：在故事组件的setup函数中，根据args.dataSource的选择结果，返回对应数据源的Promise，实现数据源切换。
3. 修正拼写错误：原代码中ParentComopnent拼写错误，改为正确的ParentComponent。

修改完成后，使用者在Storybook的控制面板中就能看到数据源下拉选择框，切换选项即可加载对应的数据。

内容的提问来源于stack exchange，提问作者yavgz