VueJS中的类型引用提供/注入功能

Question

我正在尝试从父组件提供一个类型化的 ref，并将其注入到子组件中。

我不确定是否理解了VueJS文档，但这是我想出来的。

import type  { Ref } from 'vue'
import type { InjectionKey } from 'vue'
import type DocumentSet from '@/types/DocumentSet'

const documentSet = Symbol() as InjectionKey<{
  documentSet: Ref<DocumentSet>,
  update: () => void
}>

export default documentSet

所以，任务是提供一个类型化的对象（在我的情况下是documentSet），以及一个更新它的函数。

现在，在父组件中我有这样的代码：

import dsKey from '@/injectionKeys/documentSet'
import type DocumentSet from '@/types/DocumentSet'

...

const documentSet = ref<DocumentSet | null>(null)

provide(dsKey, {
   documentSet,
   update: () => console.log('update')
})

而在子组件中，我有这样的代码：

import dsKey from '@/injectionKeys/documentSet'

const ds = inject(dsKey)
const documentSet = ds?.documentSet

问题是，由于有很多样板代码，我觉得自己做错了什么。例如，我无法理解为什么要重构ds对象，像这样：

const { documentSet } = ds

是否有可能缩短代码，而不是写ds?.documentSet，尤其是如果我确定ds应该存在（没有它，我不会渲染子组件）

如果我这样写const { documentSet } = inject(dsKey)，会出现以下错误：

TS2339: 类型“{ documentSet: Ref ;”上不存在属性“documentSet”更新：() => 无效； } |未定义'.

这个想法是因为我想消除子组件中的重复：

<DocumentSetInfo
    :documentSet="documentSet"
  />
  <DocumentSetMemos
    :documentSet="documentSet"
  />
  <DocumentSetPrograms
    :documentSet="documentSet"
  />
  <DocumentSetPetition
    :documentSet="documentSet"
  />
  <DocumentSetPassRequests
    :documentSet="documentSet"
  />
  <DocumentSetReport
    :documentSet="documentSet"
  />
  <DocumentSetReceptionNotices
    :documentSet="documentSet"
  />

Answer 1

你可以将它放入一个可组合项中，该项提供了一个处理提供的函数provde和一个处理注入的函数use*：

const CurrentDocumentSetKey = Symbol() as InjectionKey<{
  documentSet: Ref<DocumentSet>,
  update: () => void
}>

export function provideCurrentDocumentSet(documentSet:DocumentSet, update: () => any){
  provide(CurrentDocumentSetKey, {documentSet, update})
}

export useCurrentDocumentSet(){
  const ds = inject(CurrentDocumentSetKey)
  if (!ds) throw new Error('No current DocumentSet provided')
  return ds
}

现在你只需要在父组件中调用provideCurrentDocumentSet()，所有子组件只需要执行以下操作：

const {documentSet, update} = useCurrentDocumentSet()

你甚至不需要导出InjectionKey，组件也不需要知道它。（例如Vuetify也是这样做的，例如这里）