VueJS中的类型引用提供/注入功能-PHP中文网问答

我正在尝试从父组件提供一个类型化的 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"
  />

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 }