Vue Academy · Ders

Eklentilerde Genel Özellikler ve provide/inject

app.config.globalProperties.$myPlugin, enjeksiyon için app.provide() ve TypeScript genişletmesi.

Eklentilerde Genel Özellikler ve provide/inject, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Hizmetleri Sunmanın İki Yolu

Eklentiler işlevselliği iki şekilde paylaşabilir: global özellikler (klasik Options API stili; this.$x üzerinden erişilir) ve provide/enjekte etme (Composition API stili). Modern kod, provide/enjekte etme yaklaşımını tercih eder; global özellikler ise Options API kod tabanlarında hâlâ kullanışlıdır.

app.config.globalProperties

app.config.globalProperties.$http = client, this.$http özelliğini her Options API bileşeninde kullanılabilir hâle getirir. Bileşen verileriyle çakışmayı önlemek için özelliklerin başına $ koymak bir kuraldır.

import axios from 'axios'

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

Options API'de $http Kullanımı

Bir Options API bileşeninin içinde global özelliğe this üzerinden erişilebilir.

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

Composition API Neden this Kullanamaz

<script setup> içinde bileşen örneğine bağlanmış bir this yoktur. Bu nedenle this.$http çalışmaz. Composition API bunun yerine önerilen yaklaşım olan enjekte edilmiş değerleri okur.

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

Eklentide provide Kullanımı

Composition API'yi desteklemek için eklenti aynı hizmeti bir anahtar altında app.provide ile de sunmalıdır. İkisini de sağlayın: Options API için global özellik, Composition API için provide.

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
  }
}

Composition API'de Enjeksiyon Kullanımı

Bileşenler hizmeti inject(httpKey) ile okur. Dışa aktarılan Symbol anahtarını kullanmak, dize yazım hatalarını önler ve tür belirtmeyi mümkün kılar.

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

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

InjectionKey ile Türü Belirtilmiş Enjeksiyon Anahtarları

Tam tür güvenliği için anahtarın türünü InjectionKey<T> ile belirtin. Böylece inject, doğru değer türünü otomatik olarak çıkarır.

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

Modül Genişletmesiyle $http Türünü Belirtme

this.$http özelliğini tür güvenli hâle getirmek için Vue'nun ComponentCustomProperties interface'ini bir .d.ts dosyasında genişletin. Böylece TypeScript, her yerde this.$http türünü bilir.

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

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

export {}

Genişletmenin Bulunduğu Yer

Genişletme bir modül olmalı (sondaki export {} ifadesine dikkat edin) ve tsconfig.json tarafından dahil edilmelidir. Türlerin yayımlandığında eklentiyle birlikte taşınması için dosyayı eklentinin yanına yerleştirin.

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

Global Özellikleri Ölçülü Kullanın

Global özellikler kullanışlıdır; ancak gizli bağımlılıklar oluşturur ve bileşenlerin sınanmasını ve anlaşılmasını zorlaştırır. provide/inject yaklaşımını (açık ve ağaç kapsamlıdır) tercih edin. Global özellikleri gerçekten uygulama genelinde kullanılan, Options API ile uyumlu yardımcılarla sınırlayın.

Her İki Dünyayı Destekleme

Özenle hazırlanmış bir eklenti hem Options hem de Composition API'lerini destekler: bir global özellik belirleyin VE değeri sağlayın; ayrıca hem global özellik hem de türü belirtilmiş enjeksiyon anahtarı için tür genişletmesini pakete ekleyin. Kullanıcılar bileşen stillerine en uygun olanı seçebilir.

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

Hızlı Kontrol

Eklentilerde global özellikleri ve provide/inject yaklaşımını ne kadar anladığınızı sınayın.

Özet

Eklenti hizmetlerini sunmayı öğrendiniz:

app.config.globalProperties.$http, Options API'deki this.$http özelliğini çalıştırır
Composition API'de this yoktur; bunun yerine inject kullanılır
Tam kapsam için hem global bir özellik hem de sağlanan bir değer sunun
ComponentCustomProperties genişletmesiyle this.$http türünü belirtin
Enjeksiyon yolu için türü belirtilmiş InjectionKey kullanın

Sıkça Sorulan Sorular

“Eklentilerde Genel Özellikler ve provide/inject” dersi ücretsiz mi?

Evet — “Eklentilerde Genel Özellikler ve provide/inject” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Eklentilerde Genel Özellikler ve provide/inject” dersinde ne öğreneceğim?

app.config.globalProperties.$myPlugin, enjeksiyon için app.provide() ve TypeScript genişletmesi. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Eklentilerde Genel Özellikler ve provide/inject” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Eklenti Mimarisi ve app.use()
Eklentilerde Genel Özellikler ve provide/inject
Bildirim ve Toast Eklentisi Örneği
Vue Eklentilerini Yayınlama ve Türlendirme

← Vue Academy Sayfasına Dön