vue3【实战】定义全局方法（两种方案）

以全局方法 calculate 为例

src/utils/calculate.ts

export default {sum: function (a: number, b: number) {return a + b}
}

方案1： 依赖注入 provide inject

main.ts

import calculate from './utils/calculate'app.provide('calculate', calculate)

页面中

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const { sum } = inject('calculate')const result = sum(1, 2)
console.log(result) // 3

• inject 只能在 setup 中使用，不能写在其他函数内部
• inject() 的类型推导为 unknown，所以需用 @ts-ignore 屏蔽 ts 类型推导校验

方案2： globalProperties + proxy

main.ts

import calculate from './utils/calculate'// 定义全局方法
app.config.globalProperties.calculate = calculate

页面中

const { proxy } = getCurrentInstance()!// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const result = proxy.calculate.sum(1, 2)
console.log(result)

• getCurrentInstance() 类型推导可能为 null，需加 ！声明其不为 null
• proxy 上无法推导出自定义的全局方法，所以需用 @ts-ignore 屏蔽 ts 类型推导校验