vue3中全局定义函数

场景：有时候像字典库这种，前端可能很多地方都会用到，下拉框啊，状态的回显等等；没有必要每个用到字典库的地方都去调用字典库接口；
思路：所以把字典库存储到Vuex里面，封装个全局函数，需要什么类型字典，过滤一下；就很方便

一。新建文件globalFun >> index.ts定义全局函数

//这里引入vuex
import store from '../store'

export default {
//定义过滤字典库函数
 gloFilter(typeName:any){
   return store.state.user.dictList.filter((rs:any)=>{
     return rs.type==typeName
   })
 },
 //可定义多个函数，一次性暴露出去
 delHtmlTag(str:any){
   if(str){
   return str.replace(/<[^>]+>/g,"")
 }
 }

}

二。在main.ts全局注册一下

// An highlighted block
import App from './App.vue'
//这里是
import globalFun from "./globalFun";
const app = createApp(App)
app.config.globalProperties.$func = globalFun

三。在需要的地方引用

<script lang="ts" setup>
//vue3这里需要引用一下
import {
	getCurrentInstance
	} from "vue";
const {proxy} = getCurrentInstance();

//结果结果
let filterArr=[]
filterArr=proxy.$func.gloFilter("organization_type"")
</script>