diff --git a/pc/docs/pinia-dict-guide.md b/pc/docs/pinia-dict-guide.md index 31f9123..b3855c0 100644 --- a/pc/docs/pinia-dict-guide.md +++ b/pc/docs/pinia-dict-guide.md @@ -56,11 +56,46 @@ dictStore.clearCache('user_status') --- +### 2. **常量**: `src/constants/dictCodes.js` +集中管理所有字典编码 + +**使用示例**: +```javascript +import { DICT_CODES } from '@/constants/dictCodes' + +// 好处:避免硬编码,IDE 有自动完成 +const items = await dictStore.getDictItems(DICT_CODES.USER_STATUS) + +// 所有可用的编码: +DICT_CODES.USER_STATUS // 用户状态 +DICT_CODES.USER_GENDER // 用户性别 +DICT_CODES.USER_ROLE // 用户角色 +DICT_CODES.DEPT_STATUS // 部门状态 +DICT_CODES.POSITION_STATUS // 职位状态 +// ... 更多编码 +``` --- +### 3. **Composable**: `src/composables/useDict.js` +简化在组件中使用字典的 Hook + +**基础用法**: +```javascript +import { useDictionary, useUserStatusDict } from '@/composables/useDict' +import { DICT_CODES } from '@/constants/dictCodes' + +// 方式1:使用常量 +const { statusDict, loading } = useDictionary(DICT_CODES.USER_STATUS) + +// 方式2:使用字符串 +const { dicts, loading } = useDictionary('user_status') + +// 方式3:使用特化 Hook(推荐) +const { user_statusDict, loading } = useUserStatusDict() +``` --- @@ -126,9 +161,9 @@ const props = defineProps({ --- -### 场景3:直接使用字典Store +### 场景3:快速使用 Composable Hook -直接使用字典Store获取数据: +最简单的方式,自动处理加载: ```vue