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>

你可能感兴趣的:(javascript,前端,vue.js)