Vue Academy · Ders

useCounter: Basit Bir Composable

count ref'i, artırma/azaltma işlevleri, sıfırlama ve yalnızca gerekenleri dışa açma.

2. ders / 413 adım

useCounter: Basit Bir Composable, 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.

useCounter Oluşturma

Küçük ama eksiksiz bir birleştirilebilir işlev yazacağız: useCounter. Bir sayıyı yönetir ve bunu değiştirmek için yöntemler sunar; ilk birleştirilebilir işlev için mükemmeldir.

Başlangıç Değerini Kabul Etme

İşleve varsayılan değere sahip bir initial parametresi verin; böylece çağıranlar sayacı istedikleri değerden başlatabilir.

function useCounter(initial = 0) {
  // ...
}

Dahili count Referansı

İçeride, başlangıç değeriyle başlatılmış bir ref oluşturun. Bu, birleştirilebilir işlevin sahip olduğu reaktif durumdur.

import { ref } from "vue";
function useCounter(initial = 0) {
  const count = ref(initial);
}

increment İşlevi

Referansı değiştiren bir işlev tanımlayın. count reaktif olduğundan, her tüketici otomatik olarak güncellenir.

function increment() {
  count.value++;
}

decrement ve reset

Tamamlayıcı eylemleri ekleyin. reset, kapanışta yakalanan özgün initial değerini kullanır.

function decrement() {
  count.value--;
}
function reset() {
  count.value = initial;
}

Arayüzü Döndürme

Reaktif durumu ve tüm yöntemleri içeren bir nesne döndürün. Bu, birleştirilebilir işlevin herkese açık arayüzüdür.

return { count, increment, decrement, reset };

Eksiksiz Birleştirilebilir İşlev

Birleştirildiğinde bütün yapı kısa ve herhangi bir bileşende yeniden kullanılabilir olur.

import { ref } from "vue";
export function useCounter(initial = 0) {
  const count = ref(initial);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  const reset = () => count.value = initial;
  return { count, increment, decrement, reset };
}

Bir Bileşende Kullanma

<script setup> içinde çağırın ve parçalarına ayırın. Şablon, count değerini doğrudan (otomatik olarak sarmaldan çıkarılmış biçimde) kullanabilir ve yöntemlere bağlanabilir.

const { count, increment, decrement, reset } = useCounter(10);

Şablonda

Yöntemleri düğmelere bağlayın. Her tıklama paylaşılan referansı değiştirir ve görünüm güncellenir.

<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>

Bağımsız Örnekler

useCounter için yapılan her çağrı kendi count referansını oluşturur. Onu çağıran iki bileşen, ayrı ve yalıtılmış sayaçlar elde eder.

const a = useCounter();   // own count
const b = useCounter(100); // own count

Hesaplanmış Ekler Ekleme

Birleştirilebilir işlevi, yanında döndürülen isZero hesaplanmış değeri gibi türetilmiş durumlarla zenginleştirebilirsiniz.

import { computed } from "vue";
const isZero = computed(() => count.value === 0);
// add to return: { count, isZero, increment, ... }

Kısa Kontrol

useCounter için yapılan her çağrı neden kendi durumuna sahip olur?

İnteraktif derste cevapla

Özet

useCounter(initial) oluşturdunuz: dahili bir count referansı, increment/decrement/reset işlevleri ve reaktif durumla yöntemleri dışa açan bir döndürülen nesne. Her çağrı bağımsız bir örnek oluşturur.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“useCounter: Basit Bir Composable” dersi ücretsiz mi?

Evet — “useCounter: Basit Bir Composable” 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.

“useCounter: Basit Bir Composable” dersinde ne öğreneceğim?

count ref'i, artırma/azaltma işlevleri, sıfırlama ve yalnızca gerekenleri dışa açma. 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.

“useCounter: Basit Bir Composable” 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

← Vue Academy Sayfasına Dön