Vue3使用hooks解决字典数据的显示问题

import { getDictData } from '../../src/api/app'   //这里是字典列表的请求接口
import {ref,onMounted} from 'vue'

export default function(){
    const dictDataCanUse = ref([]);   //注意， 这里要定义成响应式的数据，其它页才可以用，

	//getDictDataFun 接收两个参数，也可能是一个参数， 如果是只接收一个参数， 说明是要获取字典列表，给 el-select el-option 等来使用的，如果是两个参数， 则说明是给 table-column中的显示数据名称来使用的
    const getDictDataFun = (str,value = "")=>{  //注意这个地方不能使用 async 和 await ,因为这个函数是要导出去给 模板使用的， 而如果加了 async ，则返回的是一个 promise 函数， 页面中用不了
        let label = ref("");     
        if(Object.keys(dictDataCanUse.value).length == 0 || dictDataCanUse.value[str] == undefined){  第一次请求的时候 是没有值的
            dictDataCanUse.value[str] = [];  这里我们先的把数据赋成空数组，  不然后面的dictDataCanUse.value[str].find 这句会报错
            let res =  getDictData({  
                type: str
            }).then(res=>{
                dictDataCanUse.value = res;  //这里我们请求并更改了 dictDataCanUse
            })
        }
        if(value){ //如果有value ，我们得到label来返回数据
            let labelitem = dictDataCanUse.value[str].find(item=>{
                return item.id == value
            })
            label.value = labelitem.name?labelitem.name:"";
        }
		// 如果 value 不为空，则返回 label ,如果为空， 则返回字典数据
        return value ? label : dictDataCanUse.value[str];
    }
    return {getDictDataFun}  //把这个方法 export 出去
}

import useDictDataCanUse from '@/hooks/useDictDataCanUse'
const { getDictDataFun } = useDictDataCanUse()

//------------
 在template中的使用
 如果是 el-select 中使用
   <el-form-item prop="source_from">
        <el-select class="w-[200px]" style="width:200px" v-model="queryParams.source_from" clearable placeholder="客户来源">
           <el-option label="全部" value=""></el-option>
          <el-option v-for="(item,index) in getDictDataFun('source_from')" :key="index" :label="item.name" :value="parseInt(item.value)"></el-option>
   		</el-select>
 </el-form-item>

如果是table-column中使用
  <el-table-column label="渠道来源" prop="source_from">
                        <template v-slot:default ="{ row }">
                            <el-tag effect="plain">{{ getDictDataFun('source_from',row.source_from) }}</el-tag>
                        </template>
                    </el-table-column>
//-------------