javascript typescript 前端 vue.js 【vue3】 封装数字字典列表接口调用

在写vue3后台管理系统，有字典管理功能，将字典管理增删改查页面接口写完，在其他页面使用数字字典，将接口封装方便使用，

接口数据展示：

第一步：创建utils文件，新建dict.js

import { ref, toRefs } from 'vue';

import { getDictList } from '@/api/sys' //引入封装数字字典接口

/**

* 获取字典数据

*/

export function getDict(...args) {

const res = ref({});

return (() => {

args.forEach((d, index) => {

res.value[d] = [];

getDictList(d).then(result => {

res.value[d] = result.data.body.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.dictType }));

})

})

return toRefs(res.value);

})()

}

第二步：组件封装，componeents文件下创建DictTag文件，新建index.vue

第三步：在main.ts全局引用

import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

import store from "./store";

import "@/style/border.less";

import ElementPlus from "element-plus";

import "element-plus/lib/theme-chalk/index.css";

import request from "@/request/index";

import * as ELIcons from "@element-plus/icons-vue";

//import dict from "@/utils/dict";

import { getDict } from '@/utils/dict' // 1， 引入字典封装接口

import auth from "@/api/auth";

// 字典标签组件

import DictTag from '@/components/DictTag/index'

// 这里监听请求的错误统一处理（做弹窗提示提示）

request.on("HttpStatusFaild", () => {

console.log("Capture status");

alert("请求失败，请检查接口问题");

});

const app = createApp(App);

app.config.globalProperties.$dict = getDict; // 2，引入字典封装

app.config.globalProperties.$auth = auth; // 2，引入字典封装

app

.use(store)

.use(router)

.use(ElementPlus)

.mount("#app");

// // 注册全局组件

for (const name in ELIcons) {

app.component(name, (ELIcons as any)[name]);

}

app.component('DictTag', DictTag); // 3，字典全局组件挂载

第四步：在页面使用

//这个地方写法注意，如果setup是在里面要将里面的const声明的return

第四步：效果图

好文链接