我这个场景是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 ");

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