加载器

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

加载器可用于加载任何资产、延迟加载组件或从远程 API 获取数据。此功能旨在作为性能优化，以处理大型故事导入。但是，参数是管理故事数据的推荐方法。我们正在围绕参数构建一个工具和技术的生态系统，这些工具和技术可能与加载的数据不兼容。

它们是一种高级功能（即，备用方案），我们仅建议在您有其他方法无法满足的特定需求时才使用它们。

获取 API 数据

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

当您需要从外部（例如，从远程 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 调用获得的响应组合到故事上下文上的loaded字段中，该字段是故事函数的第二个参数。例如，在 React 中，故事的参数首先被展开以优先于加载程序提供的静态数据。对于其他框架（例如 Angular），您可以像往常一样编写故事。

全局加载器

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

.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;

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

加载器继承

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

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

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