优雅实现字典状态管理:基于 Vue3 + Pinia
摘要:一份优雅的 Vue3 + Pinia 字典状态管理实践,解决数据复用、类型提示与性能缓存的终极方案,让你的项目从此告别散落各处的字典逻辑。话不多说,上代码。
1. Pinia Store 实现
javascript
import { defineStore } from 'pinia';
export const useDictStore = defineStore('dict', {
state: () => ({
dict: [],
}),
actions: {
// 获取指定字典类型
getDict(key) {
try {
const item = this.dict.find(item => item.key === key);
return item ? item.value : null;
} catch (e) {
console.error('获取字典失败:', e);
return null;
}
},
// 设置字典数据
setDict(key, value) {
if (!key || typeof key !== 'string') return;
// 避免重复添加
const index = this.dict.findIndex(item => item.key === key);
if (index !== -1) {
this.dict[index].value = value;
} else {
this.dict.push({ key, value });
}
},
// 移除字典数据
removeDict(key) {
try {
const index = this.dict.findIndex(item => item.key === key);
if (index !== -1) {
this.dict.splice(index, 1);
return true;
}
return false;
} catch (e) {
console.error('移除字典失败:', e);
return false;
}
},
// 清空所有字典数据
clearAll() {
this.dict = [];
}
},
});
2. Hook 封装
ini
import { ref, toRefs } from 'vue';
import { useDictStore } from '@/stores/dict';
import { getHttpDicts } from '/@/api/dict'; // 根据key获取字典接口
export function useDict(...args) {
const res = ref({});
const dictStore = useDictStore();
args.forEach((dictType) => {
res.value[dictType] = [];
const dicts = dictStore.getDict(dictType);
if (dicts) {
res.value[dictType] = dicts;
} else {
getHttpDicts(dictType).then((resp) => {
const dictData = resp.data.map((p) => ({
label: p.label,
value: p.value,
}));
res.value[dictType] = dictData;
dictStore.setDict(dictType, dictData);
}).catch(error => {
console.error(`获取字典${dictType}失败:`, error);
});
}
});
return toRefs(res.value);
}
2. 使用示例
javascript
import { useDict } from '@/hooks/useDict';
const { user_status, order_type } = useDict('user_status', 'order_type');