Vue Academy · Pelajaran

useCounter: Composable Sederhana

Ref count, fungsi increment/decrement, reset, serta hanya mengekspos bagian yang diperlukan.

useCounter: Composable Sederhana 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.

Membangun useCounter

Kita akan menulis komposabel kecil namun lengkap: useCounter. Komposabel ini mengelola sebuah angka dan menyediakan metode untuk mengubahnya—komposabel pertama yang sempurna.

Menerima Nilai Awal

Berikan parameter initial pada fungsi, lengkap dengan nilai bawaan, agar pemanggil dapat memulai penghitung dari angka berapa pun.

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

Ref count Internal

Di dalamnya, buat ref untuk count yang diisi dengan nilai awal. Inilah keadaan reaktif yang dimiliki komposabel.

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

Fungsi increment

Definisikan fungsi yang mengubah ref. Karena count bersifat reaktif, setiap pengguna diperbarui secara otomatis.

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

decrement dan reset

Tambahkan tindakan pelengkapnya. reset menggunakan initial asli yang ditangkap dalam penutupan.

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

Mengembalikan API

Kembalikan objek yang berisi keadaan reaktif dan semua metode. Inilah antarmuka publik komposabel.

return { count, increment, decrement, reset };

Komposabel Lengkap

Setelah disatukan, keseluruhan komposabel ini ringkas dan dapat digunakan kembali di komponen mana pun.

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

Menggunakannya dalam Komponen

Panggil komposabel ini di <script setup> lalu lakukan destrukturisasi. Templat dapat menggunakan count secara langsung (dibuka otomatis) dan mengikat metodenya.

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

Di dalam Templat

Hubungkan metode ke tombol. Setiap klik mengubah ref bersama, lalu tampilan diperbarui.

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

Instans Independen

Setiap pemanggilan useCounter membuat ref count sendiri. Dua komponen yang memanggilnya mendapatkan penghitung yang terpisah dan terisolasi.

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

Menambahkan Nilai Terhitung

Anda dapat memperkaya komposabel dengan keadaan turunan, seperti nilai terhitung isZero, lalu mengembalikannya bersama nilai lainnya.

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

Pemeriksaan Singkat

Mengapa setiap pemanggilan useCounter mendapatkan keadaannya sendiri?

Ringkasan

Anda telah membangun useCounter(initial): ref count internal, fungsi increment/decrement/reset, serta objek yang dikembalikan untuk mengekspos keadaan reaktif dan metode. Setiap pemanggilan menghasilkan instans yang independen.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “useCounter: Composable Sederhana” gratis?

Ya — teks lengkap “useCounter: Composable Sederhana” 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 “useCounter: Composable Sederhana”?

Ref count, fungsi increment/decrement, reset, serta hanya mengekspos bagian yang diperlukan. 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 “useCounter: Composable Sederhana” 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

← Kembali ke Vue Academy