GUPO ADMIN

Appearance

Hooks ​

沈孟平
最后更新于 2026-04-23 19:53:53

简介 ​

@gupo-admin/components/hooks 提供了一系列优雅且可复用的逻辑封装，当然更多还是为了这个中后台项目模板进行服务。

当前提供的 Hooks ​

Hook适用场景核心能力
useRequest需要对接本项目请求封装的异步数据获取默认参数、防抖、节流、轮询、错误态和返回数据管理
useAtTheme需要读取当前主题色并派生业务色值读取 Naive UI 主题变量，并生成一组常用衍生色

特性 ​

  • 🚀 高性能: 基于 Vue 3 Composition API,充分利用响应式特性
  • 💪 类型安全: 使用 TypeScript 编写,提供完整的类型定义
  • 🎯 按需引入: 支持 Tree Shaking,只打包你使用的功能
  • 📦 轻量级: 代码精简,没有冗余依赖
  • 🔧 灵活可配置: 提供丰富的配置项,满足不同场景需求

安装 ​

bash
ni @gupo-admin/components

使用示例 ​

vue
<script setup>
import { useRequest } from '@gupo-admin/components/hooks'

const { data, loading } = useRequest(() => {
  return fetch('/api/user')
})
</script>

使用建议 ​

  • useRequest 假设你的请求函数返回结构和当前模板的请求封装一致，也就是同时包含 data 和 err。
  • 如果你需要把返回结果继续作为 AtForm、AtTreeFilter 这类深层联动组件的依赖，记得根据场景决定是否把 shallow 设为 false。
  • useAtTheme 适合做“业务色派生”，例如 hover 背景、高亮色、二级提示色，而不是替代完整主题系统。

参与贡献 ​

如果你有好的想法或建议,欢迎提交 Pull Request 或 Issue，或者点击每篇文章头部的相关人员进行沟通。

让我们一起打造更好用的 Hooks 库!

Last updated: