vue2 实现Dict 自动加载

import {getUrl} from "@/api/requester";

export const getDictDataByType = (type) => getUrl("/dict/getDictDataByType/",type)

export default {
    namespaced: true,
    state: {
        dictPairs: {

        },
        dictList: {

        }
    },
    getters: {
        dictPair: state => state.dictPair,
        dictList: state => state.dictList
    },
    mutations: {
        setDictPairs(state, {type, pair}){
            state.dictPairs[type] = pair
        },
        setDictList(state, {type, list}){
            state.dictList[type] = list
        }
    },
    actions: {

    },
}

import Vue from 'vue'
import Vuex from 'vuex'

import Dict from "./Dict";

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    Dict
  }
})

import {getDictDataByType} from "@/api/url/sys-dict";

// 解析接口请求的响应，获取 value 和 lable
function parseDictList(list){
    let dictPair = {}
    let dictList = []
    list.forEach(item => {
				// 根据实际请求修改参数名称
        let value = item.dictValue;
        let label = item.dictLabel;
        dictList.push({
            value:value,
            label:label
        })
        dictPair[value] = label;
    })
    return {
        dictPair:dictPair,
        dictList:dictList
    }
}

// Mixin
export default {
    data(){
        if (this.$options === undefined || this.$options.dicts === undefined || this.$options.dicts === null) {
            return {}
        }
        return{
            dict:{},
            dictPairs:{},
        }
    },
    methods: {
        // 根据字典类型的 value 获取 label
        dictLabel(type,value){
            let pair = this.dictPairs[type];
            if (pair){
                let label = pair[value];
                if (label){
                    return label;
                }
            }
            return value;
        }
    },
    created() {
        const dicts = this.$options.dicts;
        if (!dicts || dicts.length <= 0){
            return
        }
        let that = this;
        dicts.forEach(type => {
            // 判断 store 中是否存在
            if (!that.$store.state.Dict.dictPairs[type] || !that.$store.state.Dict.dictList[type]){
								// store 中不存在则请求
                getDictDataByType(type).then(
                    (data) => {
                        if (data.code == 200){
                            let result = parseDictList(data.data)
                            let dictPair = result.dictPair;
                            let dictList = result.dictList;
                            that.dict[type] = dictList;
                            that.dictPairs[type] = dictPair;
														// 存储到 Vuex 中，可以根据实际情况调整
                            that.$store.commit('Dict/setDictPairs', {type:type, pair:dictPair});
                            that.$store.commit('Dict/setDictList', {type:type, list:dictList});
                            // 确保字典加载完成后页面重新渲染
                            that.$nextTick(() => {
                                that.$forceUpdate();
                            });
                        }else {
                            this.$message.error(data.msg)
                        }
                    }
                )
            }else {
                that.dict[type] = this.$store.state.Dict.dictList[type];
                that.dictPairs[type] = this.$store.state.Dict.dictPairs[type];
            }

        })
    }
}

import dict from "./utils/dict"
Vue.mixin(dict);

<template>
    <span>{{dictLabel('sys_user_sex',userInfo.userSex)}}</span>
</template>

<script>

export default {
  name: "BaseInfo",
  dicts:["sys_user_sex"],
  data(){
    userInfo: {
        nickName: null,
        userSex: null
    }
  },
  methods: {},
}
</script>