Storybook 中的 Loaders 机制详解：异步数据加载的艺术-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00438/article/details/148323291

Storybook 中的 Loaders 机制详解：异步数据加载的艺术

storybook 项目地址: https://gitcode.com/gh_mirrors/sto/storybook

什么是 Loaders

在 Storybook 项目中，Loaders（加载器）是一种强大的异步数据加载机制，它允许开发者在故事渲染之前预先加载所需的数据资源。这些加载器本质上是一系列异步函数，它们会在故事及其装饰器执行前运行，将获取到的数据注入到故事的渲染上下文中。

Loaders 的核心价值

Loaders 主要解决以下几个场景的问题：

大型资源加载：当组件依赖体积较大的资源文件时
异步组件加载：需要动态导入（懒加载）某些组件模块
远程数据获取：从后端API获取组件渲染所需的数据

特别值得注意的是，虽然 Loaders 功能强大，但 Storybook 官方更推荐使用 Args 系统来管理故事数据。Args 拥有更完善的工具生态和最佳实践，而 Loaders 更像是一种"逃生舱"机制，适用于那些 Args 无法满足的特殊场景。

基本使用示例

让我们看一个典型的 API 数据获取场景。假设我们有一个待办事项列表组件，需要从远程API获取数据：

export const Primary = {
  loaders: [
    async () => ({
      todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
    }),
  ],
  render: (args, { loaded: { todo } }) => ({
    components: { TodoList },
    setup() {
      return { args: { ...args, todo } };
    },
    template: '<TodoList v-bind="args" />',
  }),
};

在这个例子中：

loaders 数组包含一个异步函数，它通过 fetch API 获取数据
获取到的数据会被合并到 loaded 对象中
在 render 函数中，我们可以通过解构获取 loaded.todo 数据

Loaders 的作用域

Storybook 提供了灵活的作用域控制，允许我们在不同层级定义 Loaders：

1. 全局 Loaders

在 .storybook/preview.js 中定义的 Loaders 会应用于所有故事：

export const loaders = [
  async () => ({
    currentUser: await fetch('/current-user').then(res => res.json()),
  }),
];

2. 组件级 Loaders

针对特定组件所有故事的 Loaders：

export default {
  title: 'UserProfile',
  loaders: [
    async () => ({
      userPreferences: await fetch('/user/preferences').then(res => res.json()),
    }),
  ],
  component: UserProfile,
};

3. 故事级 Loaders

最细粒度的控制，只影响单个故事：

export const WithSpecialData = {
  loaders: [
    async () => ({
      specialData: await fetchSpecialData(),
    }),
  ],
  // ... 其他配置
};

Loaders 的执行规则

理解 Loaders 的执行顺序和合并规则非常重要：

并行执行：所有适用的 Loaders 会并行执行
数据合并：所有结果都会合并到 loaded 对象中
优先级规则：当键名冲突时，后定义的 Loaders 优先级更高
- 全局 Loaders 按定义顺序执行
- 组件级 Loaders 按定义顺序执行
- 故事级 Loaders 按定义顺序执行