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

优雅实现字典状态管理:基于 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');
相关推荐
人工智能训练师7 小时前
在Ubuntu中如何使用PM2来运行一个编译好的Vue项目
linux·运维·服务器·vue.js·ubuntu·容器
浩星7 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
萌萌哒草头将军8 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。8 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
薄雾晚晴8 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js
薄雾晚晴9 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
niuhuahua9 小时前
大模型流式聊天,实时对话,快捷问题选项
vue.js
JIngJaneIL9 小时前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统
Artea9 小时前
聊聊 Vue3 的泛型
vue.js