加载器

加载器是异步函数，用于为 story 及其 decorators 加载数据。Story 的加载器在 story 渲染之前运行，加载的数据通过其渲染上下文注入到 story 中。

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

它们是一项高级功能（即，紧急出口），我们只建议在您有其他方法无法满足的特定需求时使用它们。

获取 API 数据

Stories 是隔离的组件示例，用于渲染在 story 内部定义或与 story 一起作为 args 定义的内部数据。

当您需要从外部加载 story 数据时（例如，从远程 API），加载器非常有用。考虑以下示例，该示例获取一个待办事项以在待办事项列表中显示

MyComponent.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
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: Meta<typeof TodoItem> = {
  component: TodoItem,
  render: (args, { loaded: { todo } }) => <TodoItem {...args} {...todo} />,
};
 
export default meta;
type Story = StoryObj<typeof TodoItem>;
 
export const Primary: Story = {
  loaders: [
    async () => ({
      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
    }),
  ],
};

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

全局加载器

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

.storybook/preview.ts

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

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

加载器继承

与 parameters 类似，加载器可以在全局级别、组件级别和单个 story 级别定义（如我们所见）。

应用于 story 的所有级别的所有加载器，都在 story 在 Storybook 的画布中渲染之前运行。

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