Vue Academy · Ders

Composable Fabrikaları ve Parametreli Composable'lar

Composable fabrikaları oluşturma, durumu örnek başına kapsamlandırma ve paylaşılan tekil durumdan kaçınma.

Composable Fabrikaları ve Parametreli Composable'lar, 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.

Parametre Alan Birleştirilebilir İşlevler

Sade bir birleştirilebilir işlev sabit davranış döndürür. Parametreli birleştirilebilir işlev, ne yaptığını özelleştirmek için bağımsız değişkenleri kabul eder — temel adres, seçenekler ve varsayılanlar gibi — böylece tek bir işlev birçok duruma hizmet edebilir.

Basit Bir Parametreli Birleştirilebilir İşlev

Yapılandırmayı bağımsız değişken olarak geçiriniz. Burada URL çağıran tarafından sağlanır; böylece tek bir useFetch her uç nokta için çalışabilir.

import { ref } from "vue"

export function useFetch(url) {
  const data = ref(null)
  fetch(url).then(r => r.json()).then(d => data.value = d)
  return { data }
}

Seçenekler Nesnesini Kabul Etme

Çok sayıda ayar için varsayılan değerlere sahip bir seçenekler nesnesi alınız. Bu, çağrı noktasının okunabilir kalmasını ve birleştirilebilir işlevin esnek olmasını sağlar.

export function useFetch(url, options = {}) {
  const { immediate = true, method = "GET" } = options
  const data = ref(null)
  function run() { /* fetch with method */ }
  if (immediate) run()
  return { data, run }
}

Birleştirilebilir İşlev Üreticisi Nedir

Üretici bir adım daha ileri gider: ortak ayarlarla önceden yapılandırılmış bir birleştirilebilir işlev döndüren bir işlevdir. Bir kez yapılandırır, ardından bileşenler arasında kullanabileceğiniz amaca uygun birleştirilebilir işlevi elde edersiniz.

Üretici Oluşturma

Dış işlev ortak yapılandırmayı (örneğin baseURL) yakalar; döndürülen iç işlev, yapılandırmanın kapanım aracılığıyla içine işlendiği birleştirilebilir işlevdir.

export function createApi(baseURL) {
  return function useApi(path) {
    const data = ref(null)
    fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
    return { data }
  }
}

Üretici Kullanma

Yapılandırılmış birleştirilebilir işlevi oluşturmak için üreticiyi bir kez (çoğunlukla ortak bir modülde) çağırın; ardından bu işlevi her yerde içe aktararak kullanın.

// api.js
export const useApi = createApi("https://api.example.com")

// component
import { useApi } from "./api"
const { data } = useApi("/users")

Örneğe Özel State

Birleştirilebilir işlevi her çağırdığınızda, oluşturduğu referanslar yeni olur ve yalnızca o çağrıya ait kalır. useFetch işlevini çağıran iki bileşen, birbirinden bağımsız data referansları elde eder — yanlışlıkla paylaşım gerçekleşmez.

const a = useFetch("/posts")   // its own data ref
const b = useFetch("/comments") // a separate data ref

Modül Düzeyinde Paylaşılan Tekil Örnek

Bazen tek bir ortak örnek WANT edersiniz. State, işlevin dışında modül düzeyinde bildirilir ve birleştirilebilir işlev bunu kapanımıyla kullanır — her çağıran aynı referansları paylaşır.

import { ref } from "vue"
const user = ref(null) // module-level, shared

export function useAuth() {
  function login(u) { user.value = u }
  return { user, login }
}

Örneğe Özel State ve Tekil Örnek

İşlevin içindeki state → çağrı başına yeni (bileşen başına) — formlar, veri getiriciler.
Modül düzeyindeki state → paylaşılan tekil örnek — mevcut kullanıcı, tema, uygulama genelindeki bayraklar.

Seçiminizi, verilerin bileşene özel mi yoksa genel mi olduğuna göre yapınız.

Üretici ile Tekil Örneği Birleştirme

Bir üretici tekil bir örnek de oluşturabilir: paylaşılan state'i üretici çağrısının içinde oluşturun (bu çağrı bir kez çalışır) ve döndürülen birleştirilebilir işlevin bu state'i kapanımıyla kullanmasını sağlayın.

export function createStore(initial) {
  const state = ref(initial) // created once per factory call
  return function useStore() {
    return { state }
  }
}
export const useCounter = createStore(0)

Üreticiye Ne Zaman Başvurulmalı

Birkaç birleştirilebilir işlev yapılandırmayı (temel adres, üst bilgiler, istemci örneği) paylaşıyorsa veya küçük bir kitaplık oluşturup kullanıcıların bir kez yapılandırma yapmasını istiyorsanız üretici kullanınız. Aksi durumda parametreli birleştirilebilir işlev daha basittir.

Hızlı Kontrol

Birleştirilebilir işlev üreticileri ve kapsamlandırma konusundaki anlayışınızı kontrol ediniz.

Özet

Birleştirilebilir işlev üreticilerini ve kapsamlandırmayı öğrendiniz:

Parametreli birleştirilebilir işlevler, davranışı özelleştirmek için bağımsız değişkenler veya seçenekler alır.
Üretici, önceden yapılandırılmış birleştirilebilir işlev döndüren bir işlevdir (yapılandırma kapanım aracılığıyla yakalanır).
İşlevin içindeki state örneğe özeldir; modül düzeyindeki state paylaşılan bir tekil örnektir.
Bileşene özel veriler için örneğe özel state, uygulama genelindeki state için tekil örnek kullanınız (mevcut kullanıcı, tema).

Sıkça Sorulan Sorular

“Composable Fabrikaları ve Parametreli Composable'lar” dersi ücretsiz mi?

Evet — “Composable Fabrikaları ve Parametreli Composable'lar” 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.

“Composable Fabrikaları ve Parametreli Composable'lar” dersinde ne öğreneceğim?

Composable fabrikaları oluşturma, durumu örnek başına kapsamlandırma ve paylaşılan tekil durumdan kaçınma. 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.

“Composable Fabrikaları ve Parametreli Composable'lar” 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

İleri Düzey Reaktivite: shallowRef ve triggerRef
Composable Fabrikaları ve Parametreli Composable'lar
Vue'da XState ile Durum Makineleri
Gruplandırılmış Etkiler için effectScope

← Vue Academy Sayfasına Dön