Fonctionnalité de fourniture/injection de référence de type dans VueJS

Question

J'essaie de fournir une référence typée à partir d'un composant parent et de l'injecter dans le composant enfant.

Je ne suis pas sûr de comprendre la documentation de VueJS, mais c'est ce que j'ai proposé.

importer le type { Ref } depuis 'vue'
importer le type {InjectionKey} depuis 'vue'
importer le type DocumentSet depuis '@/types/DocumentSet'

const documentSet = Symbol() comme InjectionKey<{
  documentSet : Réf<DocumentSet>,
  mise à jour : () =>
}>

exporter le documentSet

Donc, la tâche consiste à fournir un objet typé (dans mon cas, un documentSet) et une fonction qui le met à jour.

Maintenant, dans le composant parent, j'ai ce code :

importer dsKey depuis '@/injectionKeys/documentSet'
importer le type DocumentSet depuis '@/types/DocumentSet'

...

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

fournir (dsKey, {
   documentSet,
   mise à jour : () => console.log('mise à jour')
})</pré>
<p>Et dans le composant enfant, j'ai ce code : </p>
<pre class="brush:php;toolbar:false;">importer dsKey depuis '@/injectionKeys/documentSet'

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

Le problème est que, comme il y a beaucoup de code passe-partout, j'ai l'impression de faire quelque chose de mal.Par exemple, je ne comprends pas pourquoi l'objet ds doit être refactorisé comme ceci :

const { documentSet } = ds

Est-il possible de raccourcir le code au lieu d'écrire ds?.documentSet, surtout si je suis sûr que ds devrait exister (sans cela, je ne restituerai pas le composant enfant)< ;/p>

Si j'écris const { documentSet } = inject(dsKey), l'erreur suivante apparaîtra :

TS2339 : La propriété 'documentSet' n'existe pas sur le type '{ documentSet : Réf ;' Mise à jour : () =>

L'idée est que je souhaite éliminer la duplication dans les composants enfants :

<DocumentSetInfo
    :documentSet="documentSet"
  />
  <DocumentSetMemos
    :documentSet="documentSet"
  />
  <DocumentSetProgrammes
    :documentSet="documentSet"
  />
  <DocumentSetPetition
    :documentSet="documentSet"
  />
  <DocumentSetPassRequests
    :documentSet="documentSet"
  />
  <DocumentSetRapport
    :documentSet="documentSet"
  />
  <DocumentSetReceptionNotices
    :documentSet="documentSet"
  />

Answer 1

Vous pouvez le mettre dans un composable qui fournit une fonction provde qui gère la fourniture et une fonction use* qui gère l'injection :

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
}

Il vous suffit désormais d'appeler provideCurrentDocumentSet() dans le composant parent, et tous les composants enfants n'ont qu'à effectuer les opérations suivantes :

const {documentSet, update} = useCurrentDocumentSet()

Vous n'avez même pas besoin d'exporter l'InjectionKey et le composant n'a pas besoin de le savoir. (Vuetify fait ça aussi, par exemple ici)