Loaders

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

加载器可用于加载任何资源、延迟加载组件或从远程 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 字段中
如果存在重叠的键，“较晚”的加载器将优先（从低到高）
- 全局加载器，按其定义的顺序
- 组件加载器，按其定义的顺序
- 故事加载器，按其定义的顺序