字典状态管理：基于 Vue3 + Pinia 的工程化实践

warder2025-09-09 13:48

优雅实现字典状态管理：基于 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');