如何在Storybook中通过下拉/单选框切换加载不同JSON数据

核心思路 #

你的Vue组件接收Promise类型的props，所以需要在Storybook中根据控件选择结果，动态生成对应JSON数据的Promise实例，同时配置Storybook的controls面板提供下拉/单选选择器。

具体实现步骤 #

1. 导入目标JSON数据 #

先确保已在Story文件中导入person1和person2的JSON文件：

import person1Data from './person1.json';
import person2Data from './person2.json';

2. 配置Story的参数与控件类型 #

在Story的默认配置中，定义可选的人员选项，并指定控件类型（下拉框用select，单选按钮用radio）：

export default {
  title: '你的组件名称',
  component: YourVueComponent,
  argTypes: {
    personKey: {
      control: {
        type: 'select', // 替换为'radio'即可切换成单选按钮
        options: ['person1', 'person2']
      },
      defaultValue: 'person1'
    }
  }
};

3. 动态生成Promise类型的props #

创建模板函数，根据选中的选项返回对应JSON的Promise实例：

const Template = (args) => ({
  components: { YourVueComponent },
  setup() {
    // 根据选择的人员key返回对应的Promise
    const getDataPromise = () => {
      return new Promise(resolve => {
        // 模拟异步加载逻辑，实际项目可替换为真实接口请求
        setTimeout(() => {
          resolve(args.personKey === 'person1' ? person1Data : person2Data);
        }, 0);
      });
    };

    return {
      dataPromise: getDataPromise()
    };
  },
  template: '<YourVueComponent :data="dataPromise" />'
});

4. 创建故事实例 #

export const Default = Template.bind({});
Default.args = {
  personKey: 'person1'
};

关键注意事项 #

• 必须确保传递给组件的是Promise实例，而非直接的JSON对象，否则组件无法正确接收props。
• 如果JSON数据是通过网络请求加载（而非本地文件），可直接替换getDataPromise内的逻辑，比如：

const getDataPromise = () => {
  return fetch(`/api/${args.personKey}.json`).then(res => res.json());
};

• 控件样式切换：只需修改argTypes中control.type的值，即可在下拉框和单选按钮之间切换。

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