Frontend Academy · Pelajaran

provide() dan inject() untuk Injeksi Dependensi

Sediakan nilai pada komponen leluhur dan injeksikan nilai tersebut jauh di dalam hierarki, tanpa meneruskan prop berulang kali atau menggunakan pustaka pengelolaan state lengkap.

Pelajaran 1 dari 413 langkah

provide() dan inject() untuk Injeksi Dependensi adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Masalah Prop Drilling

Terkadang data berada di komponen tingkat atas dan perlu diteruskan ke turunan yang jauh. Meneruskannya melalui setiap komponen perantara (prop drilling) merepotkan dan rentan rusak.

provide() — Mendeklarasikan Nilai

Komponen leluhur memanggil provide(key, value) dalam setup(). Nilai tersebut menjadi tersedia bagi semua turunannya.

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);
</script>

inject() — Menggunakan Nilai

Turunan mana pun dapat memanggil inject(key) untuk membacanya.

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

<template>
  <div :class="theme">Theme is: {{ theme }}</div>
</template>

Reaktivitas dengan ref/reactive

Jika Anda menyediakan objek ref atau reactive, turunannya mendapatkan nilai reaktif—pembaruan diteruskan secara otomatis.

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

Kunci Simbol untuk Menghindari Benturan

Kunci berupa string berisiko mengalami benturan dalam app besar. Simbol menjamin keunikan—definisikan simbol tersebut dalam file bersama.

// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey  = Symbol('user');

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

Dukungan TypeScript

Gunakan InjectionKey<T> agar kedua sisi memiliki keamanan tipe.

import type { InjectionKey, Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

// Provider:
provide(ThemeKey, ref('dark'));

// Consumer (type-checked):
const theme = inject(ThemeKey); // Ref<string> | undefined

Nilai Bawaan

Jika tidak ada leluhur yang menyediakan kunci tersebut, inject mengembalikan undefined kecuali Anda memberikan nilai bawaan.

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

Provide Hanya-Baca

Untuk mencegah turunan mengubah status bersama, bungkus dengan readonly().

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

Provide Tingkat App

Sediakan nilai pada tingkat app agar tersedia di mana saja—berguna untuk plugin.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

Pembungkus Composable

Bungkus provide/inject dalam composable untuk API konsumen yang lebih rapi.

// useTheme.ts
import { inject, type InjectionKey, type Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

export function useTheme() {
  const theme = inject(ThemeKey);
  if (!theme) throw new Error('useTheme: no provider in tree');
  return theme;
}

provide/inject vs Pinia

provide/inject: ringan, tanpa pustaka, ideal untuk nilai bergaya plugin (tema, lokal, pengguna saat ini). Pinia: pengelolaan status lengkap dengan DevTools, optimal untuk status reaktif seluruh app dengan pembaruan yang kompleks.

Pemeriksaan Singkat

Apa cara yang disarankan untuk menghindari benturan kunci saat menggunakan provide/inject di seluruh app Vue yang besar?

Jawab di pelajaran interaktif

Ringkasan: provide/inject

Komponen leluhur menyediakan, komponen turunan mengambil—tanpa prop drilling. Nilai reaktif (ref/reactive) diteruskan secara reaktif. Kunci simbol + InjectionKey menghasilkan injeksi yang aman tipe dan bebas benturan. Nilai bawaan sebagai argumen kedua inject. readonly() mencegah perubahan. Provide tingkat app untuk plugin lintas app. Alternatif ringan untuk Pinia dalam nilai bergaya plugin.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “provide() dan inject() untuk Injeksi Dependensi” gratis?

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

Apa yang akan aku pelajari di “provide() dan inject() untuk Injeksi Dependensi”?

Sediakan nilai pada komponen leluhur dan injeksikan nilai tersebut jauh di dalam hierarki, tanpa meneruskan prop berulang kali atau menggunakan pustaka pengelolaan state lengkap. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 1 dari 4.

Berapa lama pelajaran “provide() dan inject() untuk Injeksi Dependensi” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

provide() dan inject() untuk Injeksi Dependensi
Komponen Asinkron dan Suspense
Direktif Khusus
Sistem Plugin: app.use()

← Kembali ke Frontend Academy