Cucu membaca: terang

Nilainya diturunkan lewat provide, bukan dioper sebagai prop.

Tidak ada yang perlu dipasang.

Vue sudah menyediakan padanannya — provide() dan inject(). Halaman ini menjelaskan cara memakainya.

Vue menyediakannya sebagai dua fungsi bawaan:

// Di komponen induk
import { provide } from 'vue'
provide('tema', temaRef)

// Di komponen anak, sedalam apa pun
import { inject } from 'vue'
const tema = inject('tema')

Aman tipe

Pakai InjectionKey supaya tipenya ikut terbawa, dan salah ketik jadi galat saat build — bukan undefined saat dijalankan.

// kunci.ts
import type { InjectionKey, Ref } from 'vue'

export interface Tema {
  gelap: Ref<boolean>
  balik: () => void
}

export const kunciTema = Symbol('tema') as InjectionKey<Tema>

provide(kunciTema, { gelap, balik })   // induk
const tema = inject(kunciTema)          // anak — tipenya sudah `Tema`

Kalau wajib ada

inject mengembalikan undefined kalau tidak ada yang menyediakannya. Untuk nilai yang memang wajib, buat pembungkus kecil yang melempar dengan pesan yang menyebut sebabnya:

export function pakaiTema() {
  const tema = inject(kunciTema)
  if (!tema)
    throw new Error('pakaiTema() dipanggil di luar penyedia tema')
  return tema
}

Itu yang membedakan galat yang bisa langsung dibaca dari Cannot read properties of undefined di tempat yang jauh dari sebabnya.