Vue Academy · Pelajaran

Properti Global dan provide/inject dalam Plugin

app.config.globalProperties.$myPlugin, app.provide() untuk injection, serta augmentasi TypeScript.

Properti Global dan provide/inject dalam Plugin adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Dua Cara Mengekspos Layanan

Pengaya dapat membagikan fungsionalitas dengan dua cara: properti global (gaya klasik Options API, diakses melalui this.$x) dan provide/injeksi (gaya Composition API). Kode modern lebih mengutamakan provide/injeksi; properti global tetap berguna untuk basis kode Options API.

app.config.globalProperties

app.config.globalProperties.$http = client membuat this.$http tersedia di setiap komponen Options API. Konvensinya adalah menggunakan prefiks $ agar tidak berbenturan dengan data komponen.

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

Menggunakan $http dalam Options API

Di dalam komponen Options API, properti global dapat diakses melalui this.

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

Mengapa Composition API Tidak Dapat Menggunakan this

Di dalam <script setup>, tidak ada this yang terikat pada instans komponen. Jadi, this.$http tidak berfungsi. Sebagai gantinya, Composition API membaca nilai yang diinjeksi, dan inilah pendekatan yang direkomendasikan.

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

Menggunakan Provide di Pengaya

Untuk mendukung Composition API, pengaya juga harus menggunakan app.provide untuk menyediakan layanan yang sama berdasarkan sebuah kunci. Sediakan keduanya: properti global untuk Options API dan provide untuk Composition API.

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

Melakukan Injeksi dalam Composition API

Komponen membaca layanan dengan inject(httpKey). Menggunakan kunci Symbol yang diekspor akan menghindari kesalahan pengetikan string dan memungkinkan penerapan tipe.

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

Kunci Injeksi Bertipe dengan InjectionKey

Untuk keamanan tipe penuh, beri tipe pada kunci dengan InjectionKey<T>. Kemudian inject secara otomatis menyimpulkan tipe nilai yang benar.

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

Memberi Tipe pada $http dengan Augmentasi Modul

Untuk membuat this.$http aman secara tipe, perluas antarmuka ComponentCustomProperties milik Vue dalam berkas .d.ts. TypeScript kemudian mengetahui tipe this.$http di mana pun.

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

Tempat Augmentasi Berada

Augmentasi harus berupa modul (perhatikan export {} di bagian akhir) dan disertakan oleh tsconfig.json Anda. Letakkan augmentasi di samping pengaya agar tipe tersebut ikut terbawa saat pengaya dipublikasikan.

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

Properti Global: Gunakan Secukupnya

Properti global memang praktis, tetapi merupakan dependensi tersembunyi — properti ini membuat komponen lebih sulit diuji dan dipahami. Utamakan provide/inject (eksplisit dan terbatas pada pohon komponen). Simpan properti global untuk utilitas yang benar-benar berlaku di seluruh aplikasi dan ramah terhadap Options API.

Mendukung Kedua Dunia

Pengaya yang baik mendukung Options API dan Composition API: tetapkan properti global DAN sediakan nilainya, lalu sertakan augmentasi tipe untuk properti global dan kunci injeksi bertipe. Pengguna dapat memilih mana yang paling sesuai dengan gaya komponennya.

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

Pemeriksaan Cepat

Uji pemahaman Anda tentang properti global dan provide/inject dalam pengaya.

Rangkuman

Anda telah mempelajari cara mengekspos layanan pengaya:

app.config.globalProperties.$http menyediakan this.$http untuk Options API
Composition API tidak memiliki this; sebagai gantinya, API ini menggunakan inject
Sediakan properti global dan nilai yang disediakan untuk cakupan dukungan penuh
Beri tipe pada this.$http dengan memperluas ComponentCustomProperties
Gunakan InjectionKey bertipe untuk jalur injeksi

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Properti Global dan provide/inject dalam Plugin” gratis?

Ya — teks lengkap “Properti Global dan provide/inject dalam Plugin” 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 “Properti Global dan provide/inject dalam Plugin”?

app.config.globalProperties.$myPlugin, app.provide() untuk injection, serta augmentasi TypeScript. 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 2 dari 4.

Berapa lama pelajaran “Properti Global dan provide/inject dalam Plugin” 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

Arsitektur Plugin dan app.use()
Properti Global dan provide/inject dalam Plugin
Contoh Plugin Notifikasi dan Toast
Mempublikasikan dan Mengetik Plugin Vue

← Kembali ke Vue Academy