个人技术分享

 我这个场景是vue3的uniapp，和vuex4，基于ruoyi框架的useDict方法得来的。

如果可以的话，大部分情况下都适用，比如h5...

如果是vue2的话，可以适当修改。

场景就是，如果有公共的字典，男女，状态，进度等等，又不想每个页面都调用，或者存在local，那么就可以存在vuex里，项目每次加载，同一个字典只会请求一次。

第一步先写个use方法

const useDict = (...args) => {
	const res = ref({});
	return (() => {
		args.forEach(async (dictType, index) => {
			res.value[dictType] = [];
			const dicts = await store.dispatch("getDict", dictType);
			if (dicts) {
				res.value[dictType] = dicts;
			} else {
				getDictByType(dictType).then(resp => {
					res.value[dictType] = resp.map(d => ({
						label: d.dictLabel,
						value: d.dictValue
					}));
					store.dispatch("setDict", { key: dictType, value: res.value[dictType] });
				});
			}
		});
		return toRefs(res.value);
	})();
};

然后封装一下个store modules，并挂载在createStore的modules中。

const dict = {
	state: {
		dict: []
	},
	mutations: {
		SET_DICT(state, data) {
			state.dict = data;
		}
	},
	actions: {
		// 获取字典
		getDict({ state }, _key) {
			if (_key == null || _key === "") {
				return null;
			}
			try {
				for (let i = 0; i < state.dict.length; i++) {
					let item = state.dict[i];
					if (item.key === _key) {
						return item.value;
					}
				}
			} catch (e) {
				return null;
			}
			return null; // 如果未找到对应的字典项，返回null
		},
		// 设置字典
		setDict({ state }, { key, value }) {
			if (key !== null && key !== "") {
				state.dict.push({ key, value });
			}
		},
		// 删除字典
		removeDict({ state }, _key) {
			let removed = false;
			try {
				for (let i = 0; i < state.dict.length; i++) {
					if (state.dict[i].key === _key) {
						state.dict.splice(i, 1);
						removed = true;
						break; // 找到并移除后直接退出循环
					}
				}
			} catch (e) {
				removed = false;
			}
			return removed;
		},
		// 清空字典
		cleanDict({ state }) {
			state.dict = []; // 直接赋空数组即可清空字典
		}
	}
};

export default dict;

页面中直接

import { useDict } from "@/utils";

const { task_type } = useDict("task_type");

// 如果多个
const { task_type, yes_or_no } = useDict("task_type", "yes_or_no ");

如果有对您有帮助的话， 还麻烦点个赞咯