Provide/Inject untuk Keadaan Peringkat Aplikasi
app.provide() untuk keadaan global, tema, i18n, dan mengelakkan Pinia untuk kes mudah.
Provide/Inject untuk Keadaan Peringkat Aplikasi ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.
provide pada Aras Aplikasi
Selain provide pada aras komponen, anda boleh menyediakan nilai pada tika aplikasi dengan app.provide. Nilai tersebut akan tersedia kepada setiap komponen dalam aplikasi.
const app = createApp(App);
app.provide("appVersion", "1.0.0");Menyediakan Perkhidmatan Global
provide pada aras aplikasi sangat sesuai untuk objek tunggal seperti perkhidmatan pengesahan, klien HTTP atau pencatat log — perkara yang mungkin diperlukan oleh seluruh aplikasi.
import { authService } from "./auth";
app.provide("auth", authService);Menggunakan Perkhidmatan Global
Mana-mana komponen boleh menyuntik perkhidmatan berdasarkan kunci, di mana-mana sahaja dalam pepohon, tanpa penerusan prop dan tanpa penyambungan tambahan.
const auth = inject("auth");
auth.login(credentials);Kunci Symbol untuk Nilai Global
Bagi perkhidmatan seluruh aplikasi, kunci Symbol yang dieksport (sebaik-baiknya ditaip) menjadikan suntikan selamat dan mudah ditemui di seluruh pangkalan kod.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Turutan Carian
Apabila provide pada aras aplikasi dan aras komponen menggunakan kunci yang sama, penyedia yang paling hampir akan digunakan untuk keturunan komponen tersebut. Aras aplikasi bertindak sebagai sandaran global.
Situasi yang Banyak Membaca
Provide/inject sangat sesuai apabila banyak komponen hanya membaca data dikongsi — tema, tempat dan config. Pengguna tidak perlu menulis, jadi corak ini kekal mudah dan boleh diramalkan.
Perbandingan dengan Pinia
Pinia ialah pustaka rasmi Vue untuk pengurusan keadaan. Ia menawarkan alat pembangun, stor modular, tindakan, pengambil nilai dan penyahpepijatan merentas masa — sesuai untuk keadaan global yang kompleks dan kerap diubah.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });Bila provide/inject Mencukupi
Bagi nilai dikongsi yang kebanyakannya baca sahaja, provide/inject mengelakkan lebihan penggunaan stor. Pendekatan ini lebih ringan, terbina dalam dan jelas untuk tema, i18n atau perkhidmatan yang disuntik.
Bila Perlu Menggunakan Pinia
Pilih Pinia apabila keadaan diubah dari banyak tempat, memerlukan alat pembangun, perlu dikekalkan atau mempunyai data terbitan yang kompleks. Pinia memusatkan logik dengan lebih baik berbanding pasangan provide/inject yang berselerak.
Menggabungkan Kedua-duanya
Kedua-duanya tidak saling eksklusif. Anda mungkin menggunakan Pinia untuk data aplikasi dan provide/inject untuk konteks pepohon komponen yang ringan seperti borang atau tema antara muka pengguna.
provide("formContext", { register, errors });Pertimbangan Ujian
Semasa menjalankan ujian unit terhadap komponen yang menyuntik, sediakan nilai melalui pilihan pemasangan ujian global.provide supaya komponen menerima pengganti sementara.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Semakan Pantas
Bilakah provide/inject lebih sesuai berbanding Pinia?
Imbas Kembali
Anda telah mempelajari bahawa app.provide mendedahkan perkhidmatan global kepada setiap komponen, yang boleh digunakan berdasarkan kunci di mana-mana sahaja melalui inject. Provide/inject sangat sesuai untuk konteks dikongsi yang banyak dibaca, manakala Pinia sesuai untuk keadaan global yang kompleks dan kerap diubah dengan sokongan alat pembangun.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Soalan Lazim
Adakah pelajaran “Provide/Inject untuk Keadaan Peringkat Aplikasi” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Provide/Inject untuk Keadaan Peringkat Aplikasi”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Provide/Inject untuk Keadaan Peringkat Aplikasi”?
app.provide() untuk keadaan global, tema, i18n, dan mengelakkan Pinia untuk kes mudah. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Provide/Inject untuk Keadaan Peringkat Aplikasi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Masalah Penghantaran Prop Berantai
- provide() dalam Komponen Induk
- inject() dalam Komponen Anak
- Provide/Inject untuk Keadaan Peringkat Aplikasi