以全局方法 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 类型推导校验