vue3+elmentplus实现字典加载，列表加载完，才能加载字典列的问题（视觉上会有一点延迟）

vuex利用store实现加载字典
dict.ts

import { Module } from 'vuex'
import { RootState } from '../types'
import { type } from '@/api/system/dict'

export interface DictState {
    dict: Map<string, any>
    dictTypes: string[]
}

const dictModule: Module<DictState, RootState> = {
    namespaced: true,
    state: () => ({
        dict: new Map(),
        dictTypes: []
    }),
    mutations: {
        SET_DATA(state, { key, value }: { key: string; value: any }) {
            state.dict.set(key, value)
        },
        SET_TYPES(state, key: string) {
            state.dictTypes.push(key)
        }
    },
    actions: {
        setData({ commit, state }, dictType: string) {
            return new Promise<void>((resolve, reject) => {
                type({ dictType })
                    .then((r) => {
                        commit('SET_DATA', { key: dictType, value: r.data })
                        r.data.forEach((item: any) => {
                            resolve(item)
                        })
                    })
                    .catch(() => {
                        reject('')
                    })
            })
        }
    }
}

export default dictModule

字典项展示的组件

<template>
  <el-tag>
    {{ dictData }}
  </el-tag>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useStore } from 'vuex'
import { toRaw } from '@vue/reactivity'
import { isNull } from '@/util/object'

const store = useStore()
const props = defineProps({
  dictType: {
    type: String,
    required: true
  },
  dictValue: {
    type: [String, Number],
    required: true
  },
  timeout: {
    type: Number,
    default: 200
  },
  key: {
    type: Number,
    default: 0
  }
})

const dictData = ref<string>('')

const getData = (): void => {
  const d = store.getters.dict.get(props.dictType)
  const list = toRaw(d)
  if (typeof list !== "undefined" && !isNull(list)) {
    list.map((item: { dictValue: string; dictLabel: string }) => {
      if (!props.dictValue.toString().indexOf(item.dictValue)) {
        dictData.value = item.dictLabel
      }
    })
  }
}

setTimeout(getData, props.timeout)

/**
 * 监听key（用于刷新列表等情况下，同时刷新字典）
 */
watch(
    () => props.key,
    () => {
      getData()
    },
    { deep: true, immediate: true }

)
</script>

<style scoped>

</style>

原本的想法是在getData里根据参数先保存在取出来。但是异步操作，导致存完获取不到

所以单独写了工具类

export const setDictData = (dictType: string[]) => {
    dictType.map(item => {
        store.dispatch('dict/setData', item)
            .then((ref: any) => {
                return ref;
            });
    });
};

使用的时候大致是，先在页面加载时保存进去

const dicts = ['enable', 'visible']
const dictKey = ref(0);

setDictData(dicts)

使用的时候

<template v-slot="{ row }" v-else-if="item.prop === 'status'">
    <Dict
        :key="dictKey"
        dictType="enable"
        :dictValue="row.status"
        :timeout="500">
    </Dict>
</template>