vue3依赖注入provide/inject如何设置类型

105 阅读1分钟

types文件夹下新增provide.d.ts文件,用来管理所有的依赖注入类型

export {}
import { Ref } from 'vue'
declare global {
  interface ProvideType {
    TreeData: {
      ftaModel: Ref<any>
    }
  }
}

需要提供注入的地方使用 ProvideType['TreeData']

const TreeDataKey: InjectionKey<ProvideType['TreeData']> = Symbol('TreeData')
provide(TreeDataKey, {
  ftaModel
})

注入的地方

const TreeDataKey: InjectionKey<ProvideType['TreeData']> = Symbol('TreeData')
const { ftaModel }: ProvideType['TreeData'] = inject(TreeDataKey)!

这样项目中所有需要依赖注入的地方都集中在types文件夹下面,方便统一管理设置类型

image.png