Fonctionnalité de fourniture/injection de référence de type dans VueJS
P粉441076405
2023-09-04 16:34:30
<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>
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 :
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 :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)