0Pricing
Vue Academy · Pelajaran

inject() dalam Komponen Anak

inject() dengan nilai bawaan, injeksi wajib, kunci Symbol untuk pemberian namespace.

inject() dalam Komponen Anak adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Fungsi inject

inject mengambil nilai yang disediakan oleh komponen leluhur berdasarkan kunci yang sama. Panggil fungsi tersebut di dalam <script setup>.

import { inject } from "vue";
const theme = inject("theme");

Reaktivitas Tetap Terjaga

Jika komponen leluhur menyediakan sebuah ref, nilai yang di-inject adalah ref yang sama. Pembacaan theme.value tetap reaktif dan diperbarui ketika penyedia mengubahnya.

const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)

Menyediakan Nilai Bawaan

Jika tidak ada komponen leluhur yang menyediakan kunci tersebut, inject mengembalikan undefined. Berikan argumen kedua sebagai nilai bawaan agar komponen tetap berfungsi dengan baik.

const theme = inject("theme", "light");
// "light" used when nothing was provided

Nilai Bawaan dari Factory

Untuk nilai bawaan berupa objek atau yang mahal pembuatannya, berikan fungsi factory dan atur argumen ketiga ke true, sehingga nilai bawaan hanya dibuat saat diperlukan.

const config = inject("config", () => ({ retries: 3 }), true);

Mengambil Tindakan

Jika penyedia juga menawarkan sebuah fungsi, lakukan inject dengan cara yang sama dan panggil fungsi tersebut untuk meminta perubahan—penyedia tetap memiliki kendali atas perubahan state.

const updateName = inject("updateName");
updateName("Grace");

Mengambil Objek Store

Ketika penyedia menggabungkan state dan tindakan, lakukan inject pada seluruh objek tersebut, lalu lakukan destructuring pada bagian yang diperlukan.

const { user, updateName } = inject("userStore");

Inject yang Aman Tipe dalam TypeScript

Vue mengekspor InjectionKey<T> agar injection aman secara tipe. Kunci bertipe memberi tahu TypeScript bentuk nilai yang di-inject secara tepat.

import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");

Menggunakan Kunci Bertipe

Lakukan provide dan inject dengan kunci bertipe tersebut. TypeScript kini dapat menyimpulkan tipe nilai dan menandai ketidaksesuaian.

provide(themeKey, theme);          // theme: Ref<string>
const theme = inject(themeKey);    // inferred Ref<string> | undefined

Kunci Simbol untuk Keunikan

Menggunakan Symbol sebagai kunci (sering digabungkan dengan InjectionKey) menjamin tidak ada benturan string antara penyedia yang tidak berkaitan dalam basis kode besar.

export const authKey = Symbol("auth") as InjectionKey<AuthService>;

Menangani Penyedia yang Hilang

Dalam penyiapan yang ketat, Anda mungkin ingin menimbulkan kesalahan jika injection yang diwajibkan tidak tersedia. Dengan begitu, masalah penghubungan dapat ditemukan lebih awal, alih-alih diam-diam menggunakan undefined.

const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");

Melakukan Inject di Mana Saja dalam Subpohon

Komponen dapat melakukan inject tanpa memandang kedalamannya, selama ada komponen leluhur yang menyediakan kunci tersebut. Komponen perantara tetap tidak tersentuh—itulah tujuan utama provide/inject.

Pemeriksaan Singkat

Apa yang dikembalikan oleh inject("theme", "light") ketika tidak ada penyedia?

Ringkasan

Anda telah mempelajari bahwa inject(key) membaca nilai yang disediakan dan mempertahankan reaktivitas untuk ref. Berikan nilai bawaan (atau factory) sebagai cadangan yang aman, dan gunakan InjectionKey<T> bersama kunci Symbol untuk injection yang aman secara tipe dan bebas benturan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “inject() dalam Komponen Anak” gratis?

Ya — teks lengkap “inject() dalam Komponen Anak” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “inject() dalam Komponen Anak”?

inject() dengan nilai bawaan, injeksi wajib, kunci Symbol untuk pemberian namespace. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “inject() dalam Komponen Anak” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Masalah Prop Drilling
  2. provide() dalam Komponen Induk
  3. inject() dalam Komponen Anak
  4. Provide/Inject untuk State Tingkat Aplikasi
← Kembali ke Vue Academy