Jenis peruntukan rujukan/fungsi suntikan dalam VueJS

Question

Saya cuba menyediakan ref ditaip daripada komponen induk dan menyuntiknya ke dalam komponen anak.

Saya tidak pasti sama ada saya memahami dokumentasi VueJS, tetapi inilah yang saya hasilkan.

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

Jadi, tugasnya adalah untuk menyediakan objek yang ditaip (dalam kes saya, documentSet), dan fungsi yang mengemas kininya.

Sekarang, dalam komponen induk saya mempunyai kod ini:

import dsKey daripada '@/injectionKeys/documentSet'
jenis import DocumentSet daripada '@/types/DocumentSet'

...

const documentSet = ref<DocumentSet |.

sediakan(dsKey, {
   set dokumen,
   kemas kini: () => console.log('update')
})

Dan dalam komponen kanak-kanak saya mempunyai kod ini:

import dsKey daripada '@/injectionKeys/documentSet'

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

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:

const { documentSet } = ds

Adakah mungkin untuk memendekkan kod dan bukannya menulis ds?.documentSet, terutamanya jika saya pasti bahawa ds harus wujud (tanpanya saya tidak akan memaparkan komponen anak)< ;/p>

Jika saya menulis const { documentSet } = inject(dsKey), ralat berikut akan muncul:

TS2339: Harta 'documentSet' tidak wujud pada jenis '{ documentSet: Ruj ;' Kemas kini: () =>

Ideanya adalah kerana saya ingin menghapuskan pertindihan dalam komponen kanak-kanak:

Answer 1

Anda boleh memasukkannya ke dalam composable yang menyediakan fungsi provde yang mengendalikan peruntukan dan penggunaan fungsi* yang mengendalikan suntikan:

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
}

Kini anda hanya perlu memanggil provideCurrentDocumentSet() dalam komponen induk, dan semua komponen anak hanya perlu melakukan perkara berikut:

const {documentSet, update} = useCurrentDocumentSet()

Anda tidak perlu mengeksport InjectionKey pun dan komponen tersebut tidak perlu tahu mengenainya. (Vuetify melakukan ini juga, contohnya di sini)