Scenario: Sometimes like the dictionary library, the front end may be used in many places, such as drop-down boxes, status echo, etc.; there is no need to call the dictionary library interface in every place where the dictionary library is used; idea: so
put The dictionary library is stored in Vuex, encapsulates a global function, and filters what type of dictionary is needed; it is very convenient
one. Create a new file globalFun >> index.ts to define the global function
//这里引入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,"")
}
}
}
two. Register globally in main.ts
// An highlighted block
import App from './App.vue'
//这里是
import globalFun from "./globalFun";
const app = createApp(App)
app.config.globalProperties.$func = globalFun
three. cite where needed
<script lang="ts" setup>
//vue3这里需要引用一下
import {
getCurrentInstance
} from "vue";
const {
proxy} = getCurrentInstance();
//结果结果
let filterArr=[]
filterArr=proxy.$func.gloFilter("organization_type"")
</script>