Vue Hooks Plus 中的 useRequest 组件化实践

在 Vue 生态中，数据请求管理一直是开发者关注的重点。Vue Hooks Plus 项目提供了一个强大的 useRequest hook，它能够优雅地处理异步请求状态。本文将深入探讨如何将 useRequest 封装为组件形式，以及这种模式在实际开发中的应用价值。

组件化 useRequest 的动机

在传统的 hook 使用方式中，开发者需要在 setup 函数中调用 useRequest 并手动管理返回的状态。这种方式虽然灵活，但在某些场景下会带来重复代码的问题。特别是在以下场景中：

1. 表格操作按钮：当表格每行都有独立的操作按钮（如删除）时，每个按钮需要独立的 loading 状态
2. 数据依赖组件：某些组件强依赖于请求返回的数据，需要处理 loading 和 error 状态
3. 统一请求处理：需要为多个组件提供一致的请求状态管理方式

组件化的 useRequest 能够通过作用域插槽将这些状态和方法传递给子组件，实现更简洁的代码组织。

实现方案解析

Vue Hooks Plus 从 2.4.0 版本开始提供了 createUseRequestComponent 方法，支持创建自定义的请求组件。核心实现思路包括：

1. 类型系统设计：通过泛型参数支持不同类型的数据和参数
2. 插槽设计：提供 default、loading 和 error 三个插槽，分别处理不同状态
3. 状态自动解包：内部自动处理 ref 的解包，简化模板代码

基础查询组件示例

<template>
  <use-request-query :service="getUserInfo">
    <template #default="{ data }">
      <div>用户信息: {{ data }}</div>
    </template>
    <template #loading>
      <div>加载中...</div>
    </template>
    <template #error>
      <div>加载失败</div>
    </template>
  </use-request-query>
</template>

操作型组件示例

对于删除等操作型请求，可以设置 manual 属性手动触发：

<template>
  <use-request-query 
    :service="deleteItem" 
    manual
  >
    <template #default="{ run }">
      <button @click="run(itemId)">删除</button>
    </template>
  </use-request-query>
</template>

高级应用场景

表格行操作隔离

在表格场景中，组件化 useRequest 能够完美解决行操作状态隔离问题：

<template>
  <n-data-table :columns="columns" :data="data" />
</template>

<script setup>
const columns = [
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return (
        <use-request-query :service="() => deleteItem(row.id)" manual>
          {{
            default: ({ run }) => (
              <n-button onClick={() => run()}>删除</n-button>
            )
          }}
        </use-request-query>
      )
    }
  }
]
</script>

数据强依赖组件

对于必须等待数据加载完成才能渲染的组件，可以结合 sync 属性实现：

<use-request-query 
  :service="fetchDetail" 
  :sync="true"
>
  <template #default="{ data }">
    <!-- 确保data已加载 -->
    <detail-panel :data="data" />
  </template>
  <template #loading>
    <skeleton-loader />
  </template>
</use-request-query>

最佳实践建议

1. 合理使用插槽：根据业务场景选择合适的插槽组合
2. 错误处理：充分利用 error 插槽提供友好的错误提示
3. 性能优化：对于频繁触发的操作，考虑使用防抖/节流插件
4. 类型安全：充分利用 TypeScript 泛型确保类型安全

总结

Vue Hooks Plus 的 useRequest 组件化方案为 Vue 开发者提供了一种新的异步状态管理思路。它既保留了 hook 的灵活性，又通过组件形式简化了常见场景下的代码编写。特别是在需要状态隔离、统一处理 loading/error 状态的场景下，这种模式能够显著提升代码的可维护性和开发效率。

随着 Vue 3 组合式 API 的普及，这种将逻辑与视图分离的设计模式将会在更多场景中展现其价值。开发者可以根据实际需求，灵活选择 hook 或组件形式来使用 useRequest，甚至基于 createUseRequestComponent 创建更适合自己业务的自定义请求组件。