Provide/Inject untuk State Tingkat Aplikasi
app.provide() untuk state global, tema, i18n, dan menghindari Pinia untuk kasus sederhana.
Provide/Inject untuk State Tingkat Aplikasi adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Provide Tingkat Aplikasi
Selain provide tingkat komponen, Anda dapat menyediakan nilai pada instans aplikasi menggunakan app.provide. Nilai tersebut menjadi tersedia bagi setiap komponen dalam aplikasi.
const app = createApp(App);
app.provide("appVersion", "1.0.0");Menyediakan Layanan Global
Provide tingkat aplikasi sangat cocok untuk singleton seperti layanan autentikasi, klien HTTP, atau pencatat—hal-hal yang mungkin diperlukan oleh seluruh aplikasi.
import { authService } from "./auth";
app.provide("auth", authService);Menggunakan Layanan Global
Komponen mana pun dapat melakukan inject pada layanan berdasarkan kuncinya, di mana pun posisinya dalam pohon, tanpa prop drilling dan tanpa pengaturan tambahan.
const auth = inject("auth");
auth.login(credentials);Kunci Simbol untuk Layanan Global
Untuk layanan di seluruh aplikasi, kunci Symbol yang diekspor (idealnya bertipe) membuat injection tetap aman dan mudah ditemukan di seluruh basis kode.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Urutan Pencarian
Ketika provide tingkat aplikasi dan tingkat komponen menggunakan kunci yang sama, penyedia terdekat akan digunakan untuk komponen turunan dari komponen tersebut. Provide tingkat aplikasi berfungsi sebagai cadangan global.
Skenario yang Banyak Membaca
Provide/inject sangat unggul ketika banyak komponen hanya membaca data bersama—tema, lokal, atau konfigurasi. Konsumen tidak perlu menulis data, sehingga pola ini tetap sederhana dan mudah diprediksi.
Membandingkan dengan Pinia
Pinia adalah pustaka resmi Vue untuk pengelolaan state. Pustaka ini menyediakan devtools, store modular, tindakan, getter, dan penelusuran waktu—ideal untuk state global yang kompleks dan sering diubah.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });Kapan provide/inject Sudah Cukup
Untuk nilai bersama yang sebagian besar hanya dapat dibaca, provide/inject menghindari beban tambahan store. Pola ini lebih ringan, tersedia secara bawaan, dan jelas untuk tema, i18n, atau layanan yang di-inject.
Kapan Memilih Pinia
Pilih Pinia ketika state diubah dari banyak tempat, memerlukan devtools, harus disimpan secara permanen, atau memiliki data turunan yang kompleks. Pinia memusatkan logika dengan lebih baik daripada pasangan provide/inject yang tersebar.
Menggabungkan Keduanya
Keduanya tidak harus saling menggantikan. Anda dapat menggunakan Pinia untuk data aplikasi dan provide/inject untuk konteks ringan dalam pohon komponen, seperti formulir atau tema antarmuka.
provide("formContext", { register, errors });Pertimbangan Pengujian
Saat menguji komponen yang melakukan inject, sediakan nilainya melalui opsi mount pengujian global.provide agar komponen menerima pengganti.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Pemeriksaan Singkat
Kapan provide/inject lebih baik digunakan daripada Pinia?
Ringkasan
Anda telah mempelajari bahwa app.provide mengekspos layanan global kepada setiap komponen, yang dapat digunakan berdasarkan kunci di mana pun melalui inject. Provide/inject unggul untuk konteks bersama yang banyak dibaca, sedangkan Pinia cocok untuk state global yang kompleks dan sering diubah, dengan dukungan devtools.
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
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Provide/Inject untuk State Tingkat Aplikasi” gratis?
Ya — teks lengkap “Provide/Inject untuk State Tingkat Aplikasi” 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 “Provide/Inject untuk State Tingkat Aplikasi”?
app.provide() untuk state global, tema, i18n, dan menghindari Pinia untuk kasus sederhana. 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 4 dari 4.
Berapa lama pelajaran “Provide/Inject untuk State Tingkat Aplikasi” 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
- Masalah Prop Drilling
- provide() dalam Komponen Induk
- inject() dalam Komponen Anak
- Provide/Inject untuk State Tingkat Aplikasi