Become a sponsor
9.18 Hooks 与枚举
概述
hooks/ 按 core/event/setting/web 分组沉淀组合式逻辑；enums/ 定义前端常量枚举。两者都是"写一次、处处引用"的基础设施。
Hooks 分组
| 分组 | 代表 | 职责 |
|---|---|---|
| web | usePermission | 权限判定（v-if 场景，9.7） |
| core | use-async | 异步状态管理（loading/error 包装） |
| event | 事件类 hooks | 监听与派发 |
| setting | designSetting 相关 | 主题/布局参数读写 |
| 根目录 | useTime / useOnline / useBattery / useDomWidth | 时间、网络状态、电量、宽度监听 |
枚举清单（enums/）
| 文件 | 枚举内容 |
|---|---|
| httpEnum.ts | HTTP 相关常量（结果类型、超时） |
| permissionsEnum.ts | 权限相关常量 |
| roleEnum.ts | 角色常量 |
| pageEnum.ts | 页面路径常量（BASE_LOGIN 等，守卫引用） |
| cacheEnum.ts | 缓存键常量 |
| breakpointEnum.ts | 响应式断点 |
| avatarEnum.ts | 头像相关 |
使用示例
typescript
import { usePermission } from '@/hooks/web/usePermission';
import { PageEnum } from '@/enums/pageEnum';
const { hasPermission } = usePermission();
const loginPath = PageEnum.BASE_LOGIN;编写新 hook 的规约
- 文件名
use-*.ts（kebab），导出同名函数 - 纯组合式：内部用 ref/computed/watch，不依赖组件实例才能运行的 API（或显式在 setup 调用）
- 通用才抽：两个以上页面用到再沉淀，单页面逻辑留页面内
枚举编写规约
as const+ 类型导出，避免 any- 键名大写下划线，值按语义（字符串枚举为主）
- 与后端常量对齐的值（如权限通配码）注明来源，防两端漂移