场景:有时候像字典库这种,前端可能很多地方都会用到,下拉框啊,状态的回显等等;没有必要每个用到字典库的地方都去调用字典库接口;
思路:所以把字典库存储到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>