使用Vue3 + Vuex封装字典工具 |
您所在的位置：网站首页 › vuex中的state › 使用Vue3 + Vuex封装字典工具 |
使用Vue3 + Vuex封装字典工具
|
在使用Vue开发中经常碰到一些字典转换的问题，如根据字典数据开发的一些选择框，table中根据字段值展示字典的lable等。每次都手写这些选择项或者转换字典值很是麻烦，并且字典改变之后还要修改对应的代码很是不便，所以就想着封装一个字典工具来解决这个问题。 思路第一步：使用Vuex管理字典数据。 第一步：创建一个DictUtil提供两个方法dictDataUtil和dictDataLableUtil。 dictDataUtil: 根据字段类型从Vuex中获取该字典的所有字段项数据 dictDataLableUtil： 根据字段类型从Vuex中获取该字典的该字段值对应的lable第三步：将上面的方法封装成一个插件，安装在项目中，方便在项目中调用。 实现代码 使用Vuex获取存储字典数据 创建DictStore.ts文件，在DictStore文件中使用Vuex管理字典数据 import { getDictItemsApi } from "@/api/dict"; import { Module } from "vuex"; export interface IDictItem { id: string; lable: string; value: string | number | boolean; } // 存储字典数据 export const dicts = new Map(); interface IDict { [key: string]: Map; } const DictStoreModule: Module = { state: { dicts }, getters: { getDict: (state) => (key: string): IDictItem[] | undefined => { const dict = state.dicts.get(key); return dict; }, }, mutations: { setDict(state, payload: Map): void { payload.forEach((v, k) => { state.dicts.set(k, v); }); }, delDict(state, payload: string): boolean { return state.dicts.delete(payload); }, clearAll(state: IDict): void { return state.dicts.clear(); }, }, actions: { fetchDict: async (context, payload: string): Promise => { const dict = new Map(); dict.set(payload, []); context.commit("setDict", dict); const data = await getDictItemsApi(payload); dict.set(payload, data); context.commit("setDict", dict); }, }, }; export default DictStoreModule; 复制代码 创建一个字典工具DictUtil，提供dictDataUtil和dictDataLableUtil方法。 import { IDictItem } from "@/store/modules/DictStore"; import { useStore } from "vuex"; export const dictDataUtil = (dictType: string): IDictItem[] | null => { const store = useStore(); const dictData = store.getters.getDict(dictType); if (!dictData) { store.dispatch("fetchDict", dictType); } return dictData; }; export const dictDataLableUtil = ( dictType: string, dictValue: string | number | boolean ): string | null => { const store = useStore(); const dictData = store.getters.getDict(dictType); if (!dictData) { store.dispatch("fetchDict", dictType); } if (dictData) { const dictItem = dictData.find((d: IDictItem) => d.value === dictValue); if (dictItem) { return dictItem.label; } } return null; }; 复制代码 创建字段插件将dictDataUtil和dictDataLableUtil方法封装成一个字典插件，以便全局安装 import { App } from "vue"; import { dictDataUtil, dictDataLableUtil } from "@/utils/DictUtil"; const DictInstall = { install: (app: App): App => { app.mixin({ methods: { dictData: dictDataUtil, dictDataLable: dictDataLableUtil, }, }); return app; }, }; export default DictInstall; 复制代码 安装这个插件安装字典插件，以方便在项目使用 import DictInstall from "./plugins/DictPlugin"; const app = createApp(App); app.use(DictInstall).mount("#app"); 复制代码 使用方式安装插件之后在项目中可以直接使用{{dictData}}、{{dictDataLable}}的方式转换字典，如：
在table中可以使用{{dictDataLable}}将字典值转成字段lable
在form表单中使用还存在问题，既不能使用{{dictData()}}的方式提供选择框的选项。一种不太优雅的变通方式是使用computed和dictDataUtil方法完成的，见下：
欢迎有解决方法的大佬评论留言。 |
【本文地址】
今日新闻 |
推荐新闻 |