字典状态管理:基于 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');
相关推荐
正义的大古1 小时前
OpenLayers的OGC服务 -- 章节一:WMS服务详解
前端·javascript·vue.js·openlayers
_Legend_King1 小时前
高德地图实现经纬度及获取编码、所属行政区、GIS
javascript·vue.js·elementui
java水泥工2 小时前
师生健康信息管理系统|基于SpringBoot和Vue的师生健康信息管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
拜无忧2 小时前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
岁月宁静3 小时前
Vue3.5 + SSE 构建高可用 AI 聊天交互层 ——chat.js 模块架构与实现
前端·vue.js·人工智能
前端 贾公子3 小时前
Vue3 defineModel === 实现原理
前端·javascript·vue.js
一路上__有你4 小时前
闲来无事,写一篇文章吧!
前端·javascript·vue.js
keep_di4 小时前
05-vue3+ts中axios的封装
前端·vue.js·ajax·typescript·前端框架·axios
一只小风华~5 小时前
命名视图学习笔记
前端·javascript·vue.js·笔记·学习
小白菜学前端6 小时前
Vue 配置代理
前端·javascript·vue.js