55 lines
1.8 KiB
Markdown
55 lines
1.8 KiB
Markdown
# 9.18 Hooks 与枚举
|
||
|
||
:::tip 概述
|
||
`hooks/` 按 core/event/setting/web 分组沉淀组合式逻辑；`enums/` 定义前端常量枚举。两者都是"写一次、处处引用"的基础设施。
|
||
:::
|
||
|
||
## Hooks 分组
|
||
|
||
| 分组 | 代表 | 职责 |
|
||
|---|---|---|
|
||
| web | usePermission | 权限判定（v-if 场景，[9.7](/zh/frontend/permission.html)） |
|
||
| 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
|
||
- 键名大写下划线，值按语义（字符串枚举为主）
|
||
- 与后端常量对齐的值（如权限通配码）注明来源，防两端漂移
|
||
|
||
## 相关
|
||
|
||
- [9.17 工具函数](/zh/frontend/utils.html)
|
||
- [附录 J 前端枚举速查](/zh/appendix/enums.html)
|