加载器

加载器是异步函数，用于为一个故事及其装饰器加载数据。故事的加载器在故事渲染之前运行，加载的数据通过其渲染上下文注入到故事中。

加载器可以用来加载任何资源、懒加载组件或从远程 API 获取数据。此功能被设计为性能优化，以处理大型故事导入。然而，Args 是管理故事数据的推荐方式。我们正在围绕 Args 构建工具和技术生态系统，这可能与加载的数据不兼容。

它们是高级功能（即，应急方案），我们只建议在你有其他方法无法满足的特定需求时使用它们。

获取 API 数据

故事是独立的组件示例，它们渲染作为故事的一部分或与故事一起定义为Args 的内部数据。

当你需要从外部加载故事数据时（例如，从远程 API），加载器会很有用。考虑以下示例，它获取一个待办事项并在待办事项列表中显示

MyComponent.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { TodoItem } from './TodoItem';
 
/*
 *👇 Render functions are a framework specific feature to allow you control on how the component renders.
 * See https://storybook.org.cn/docs/api/csf
 * to learn how to use render functions.
 */
const meta = {
  component: TodoItem,
  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
} satisfies Meta<typeof TodoItem>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Primary: Story = {
  loaders: [
    async () => ({
      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
    }),
  ],
};

从远程 API 调用获取的响应被合并到故事上下文的loaded字段中，它是故事函数的第二个参数。例如，在 React 中，故事的 args 首先被展开，以优先于加载器提供的静态数据。对于其他框架（例如，Angular），你可以像往常一样编写故事。

全局加载器

我们还可以通过 .storybook/preview.js 文件的 loaders 导出为所有故事设置加载器（这是你配置所有故事的文件）

.storybook/preview.ts

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Preview } from '@storybook/your-framework';
 
const preview: Preview = {
  loaders: [
    async () => ({
      currentUser: await (await fetch('https://jsonplaceholder.typicode.com/users/1')).json(),
    }),
  ],
};
 
export default preview;

在此示例中，我们加载一个“当前用户”，它可作为所有故事的 loaded.currentUser 使用。

加载器继承

与参数类似，加载器可以定义在全局级别、组件级别以及单个故事上（如我们所见）。

适用于故事的所有级别定义的加载器，都在 Storybook 的画布中渲染故事之前运行。

所有加载器并行运行
所有结果都会作为故事上下文中的 loaded 字段
如果存在重叠的键，“后”加载器会优先（从最低到最高）
- 全局加载器，按照它们的定义顺序
- 组件加载器，按照它们的定义顺序
- 故事加载器，按照它们的定义顺序