Geben Sie die Bereitstellungs-/Injektionsfunktion für Referenzen in VueJS ein

Question

Ich versuche, einen typisierten Verweis aus einer übergeordneten Komponente bereitzustellen und ihn in die untergeordnete Komponente einzufügen.

Ich bin nicht sicher, ob ich die VueJS-Dokumentation verstehe, aber das ist es, was ich mir ausgedacht habe.

import type { Ref } from 'vue'
Importtyp {InjectionKey} aus 'vue'
Importieren Sie den Typ DocumentSet aus „@/types/DocumentSet“.

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

Standarddokumentsatz

exportieren

Die Aufgabe besteht also darin, ein typisiertes Objekt (in meinem Fall ein documentSet) und eine Funktion bereitzustellen, die es aktualisiert.

Jetzt habe ich in der übergeordneten Komponente diesen Code:

dsKey aus '@/injectionKeys/documentSet' importieren
Importieren Sie den Typ DocumentSet aus „@/types/DocumentSet“.

...

const documentSet = ref<DocumentSet |.

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

Und in der untergeordneten Komponente habe ich diesen Code:

dsKey aus '@/injectionKeys/documentSet' importieren

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

Das Problem besteht darin, dass ich das Gefühl habe, etwas falsch zu machen, da es eine Menge Standardcode gibt.Ich kann zum Beispiel nicht verstehen, warum das DS-Objekt wie folgt umgestaltet werden sollte:

const { documentSet } = ds

Ist es möglich, den Code zu kürzen, anstatt ds?.documentSet zu schreiben, insbesondere wenn ich sicher bin, dass ds vorhanden sein sollte (ohne ihn werde ich die untergeordnete Komponente nicht rendern)< ;/p>

Wenn ich const { documentSet } = inject(dsKey) schreibe, erscheint die folgende Fehlermeldung:

TS2339: Eigenschaft 'documentSet' existiert nicht für Typ '{ documentSet: Ref ;' Update: () => Ungültig '.

Die Idee besteht darin, dass ich Duplikate in untergeordneten Komponenten beseitigen möchte:

<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也是这样做的，例如这里）