A cacheable dictionary library for Vue.
npm install vue-cacheable-dictionary一个面向 Vue 3 的可缓存字典加载器:维护响应式字典仓库、去重并发请求,并支持按 key 随用随取。
``bash`
pnpm add vue-cacheable-dictionary或
npm i vue-cacheable-dictionary
通常在一个 composable/模块中创建单例,提供 load 方法,然后按需查询字典。
`ts
import { createDictionaryInstance, type DictItem } from 'vue-cacheable-dictionary'
interface MyDictItem extends DictItem {
color?: string
}
const dict = createDictionaryInstance
load: async (dicts) => {
const res = await fetch('/dict', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(dicts),
})
return res.json() as Promise
},
})
export const useDict = dict.getDictData
`
组件内使用:
`ts
import { computed } from 'vue'
import { useDict } from './useDict'
const store = useDict(['type', 'status'])
const statusLabel = computed(() => store.get('status')?.label(1) ?? '')
`
- createDictionaryInstance(...):创建实例,负责缓存与请求去重。DictArray
- :类数组封装,提供 pick / omit / label / item 等便捷方法。DictItem
- / DictKey:字典数据类型定义。
- 只有字符串类型的 key 会传给 load(...);非字符串 key(例如 Symbol)会被忽略,不会触发远程请求。Map
- 字典仓库底层是 且具备响应式能力,可直接用于模板与 computed。
`bash`
pnpm install
pnpm play
pnpm test
pnpm build
pnpm typecheck
- 通过 Issue 提交 bug/需求。
- 提交 PR 时保持改动聚焦,并写清楚变更目的与影响范围。
- 提交前确保 pnpm test 与 pnpm typecheck` 通过。
MIT