Jenis peruntukan rujukan/fungsi suntikan dalam VueJS
P粉441076405
2023-09-04 16:34:30
<p>Saya cuba menyediakan ref ditaip daripada komponen induk dan menyuntiknya ke dalam komponen anak. </p>
<p>Saya tidak pasti sama ada saya memahami dokumentasi VueJS, tetapi inilah yang saya hasilkan. </p>
<pre class="brush:php;toolbar:false;">import type { Ref } from 'vue'
jenis import { InjectionKey } daripada 'vue'
jenis import DocumentSet daripada '@/types/DocumentSet'
const documentSet = Simbol() sebagai InjectionKey<{
documentSet: Ref<DocumentSet>,
kemas kini: () =>
}>
eksport default documentSet</pre>
<p>Jadi, tugasnya adalah untuk menyediakan objek yang ditaip (dalam kes saya, documentSet), dan fungsi yang mengemas kininya. </p>
<p>Sekarang, dalam komponen induk saya mempunyai kod ini: </p>
<pre class="brush:php;toolbar:false;">import dsKey daripada '@/injectionKeys/documentSet'
jenis import DocumentSet daripada '@/types/DocumentSet'
...
const documentSet = ref<DocumentSet |.
sediakan(dsKey, {
set dokumen,
kemas kini: () => console.log('update')
})</pre>
<p>Dan dalam komponen kanak-kanak saya mempunyai kod ini: </p>
<pre class="brush:php;toolbar:false;">import dsKey daripada '@/injectionKeys/documentSet'
const ds = inject(dsKey)
const documentSet = ds?.documentSet</pre>
<p>Masalahnya, memandangkan terdapat banyak kod boilerplate, saya rasa seperti saya melakukan sesuatu yang salah.Sebagai contoh, saya tidak dapat memahami mengapa objek ds harus difaktorkan semula seperti ini: </p>
<pre class="brush:php;toolbar:false;">const { documentSet } = ds</pre>
<p>Adakah mungkin untuk memendekkan kod dan bukannya menulis <code>ds?.documentSet</code>, terutamanya jika saya pasti bahawa ds harus wujud (tanpanya saya tidak akan memaparkan komponen anak)< ;/p>
<p>Jika saya menulis <code>const { documentSet } = inject(dsKey)</code>, ralat berikut akan muncul: </p>
<p><kod>TS2339: Harta 'documentSet' tidak wujud pada jenis '{ documentSet: Ruj ;' Kemas kini: () =>
<p>Ideanya adalah kerana saya ingin menghapuskan pertindihan dalam komponen kanak-kanak:</p>
<pre class="brush:php;toolbar:false;"><DocumentSetInfo
:documentSet="documentSet"
/>
<DocumentSetMemos
:documentSet="documentSet"
/>
<DocumentSetPrograms
:documentSet="documentSet"
/>
<DocumentSetPetition
:documentSet="documentSet"
/>
<DocumentSetPassRequests
:documentSet="documentSet"
/>
<DocumentSetReport
:documentSet="documentSet"
/>
<DocumentSetReceptionNotices
:documentSet="documentSet"
/></pra></p>
Anda boleh memasukkannya ke dalam composable yang menyediakan fungsi provde yang mengendalikan peruntukan dan penggunaan fungsi* yang mengendalikan suntikan:
Kini anda hanya perlu memanggil
provideCurrentDocumentSet()
dalam komponen induk, dan semua komponen anak hanya perlu melakukan perkara berikut:Anda tidak perlu mengeksport InjectionKey pun dan komponen tersebut tidak perlu tahu mengenainya. (Vuetify melakukan ini juga, contohnya di sini)