Fonctionnalité de fourniture/injection de référence de type dans VueJS
P粉441076405
P粉441076405 2023-09-04 16:34:30
0
1
542
<p>J'essaie de fournir une référence typée à partir d'un composant parent et de l'injecter dans le composant enfant. </p> <p>Je ne suis pas sûr de comprendre la documentation de VueJS, mais c'est ce que j'ai proposé. </p> <pre class="brush:php;toolbar:false;">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</pre> <p>Donc, la tâche consiste à fournir un objet typé (dans mon cas, un documentSet) et une fonction qui le met à jour. </p> <p>Maintenant, dans le composant parent, j'ai ce code : </p> <pre class="brush:php;toolbar:false;">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</pre> <p>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 : </p> <pre class="brush:php;toolbar:false;">const { documentSet } = ds</pre> <p>Est-il possible de raccourcir le code au lieu d'écrire <code>ds?.documentSet</code>, surtout si je suis sûr que ds devrait exister (sans cela, je ne restituerai pas le composant enfant)< ;/p> <p>Si j'écris <code>const { documentSet } = inject(dsKey)</code>, l'erreur suivante apparaîtra : </p> <p><code>TS2339 : La propriété 'documentSet' n'existe pas sur le type '{ documentSet : Réf ;' Mise à jour : () => <p>L'idée est que je souhaite éliminer la duplication dans les composants enfants :</p> <pre class="brush:php;toolbar:false;"><DocumentSetInfo :documentSet="documentSet" /> <DocumentSetMemos :documentSet="documentSet" /> <DocumentSetProgrammes :documentSet="documentSet" /> <DocumentSetPetition :documentSet="documentSet" /> <DocumentSetPassRequests :documentSet="documentSet" /> <DocumentSetRapport :documentSet="documentSet" /> <DocumentSetReceptionNotices :documentSet="documentSet" /></pre></p>
P粉441076405
P粉441076405

répondre à tous(1)
P粉446800329

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)

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal