載入器

載入器是異步函式，可為故事及其裝飾器載入資料。故事的載入器會在故事呈現之前執行，而載入的資料會透過其呈現內容注入到故事中。

載入器可用來載入任何資產、延遲載入元件或從遠端 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.dev.org.tw/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 欄位
如果有重疊的索引鍵，「較晚」的載入器優先（從最低到最高）
- 全域載入器，依定義的順序排列
- 元件載入器，依定義的順序排列
- 故事載入器，依定義的順序排列