vue3+ts 挂载全局过滤器函数及踩坑总结

VUE3中移除了 filter，可以用全局函数替代

const app = createApp(App)
//挂载全局函数
app.config.globalProperties.$filters = {
    userTypeFilter(type:number):string {
        return type+'-1'
    },
}

使用：虽然报错不存在属性 “$filters”，但是能正常使用，下面会讲解决方法

 

 

解决报错：在main.ts里面添加,解决方案来自@小满zs大佬的文章 https://blog.csdn.net/qq1195566313/article/details/123292042

type Filter = {
    format<T>(str: T): string
}
//声明文件 不然TS无法正确类型 推导
declare module 'vue' {
    // 声明要扩充@vue/runtime-core包的声明.
    // 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
    export interface ComponentCustomProperties {
        $filters: Filter
    }
}

 上面这种写法个人不太喜欢，如果函数数量少的话还能接受，如果多了会导致main.ts过于臃肿了，不美观，个人喜欢下面这种模块化的写法，将所有方法和声明文件分别写在一个文件里面导出，在main.ts中引入使用

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
//引入全局过滤函数
import * as allMethods from './untils/filter'
//引入过滤类型文件，否则调用将报错找不到方法
import type Filter from './untils/filter.d'
//声明文件 不然TS无法正确类型 推导
declare module 'vue' {
    // 声明要扩充@vue/runtime-core包的声明.
    // 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
    export interface ComponentCustomProperties {
        $filters: Filter
    }
}

const app = createApp(App)

app.config.globalProperties.$filters = allMethods

app.use(router)
app.mount('#app')