0Pricing
Vue Academy · Pelajaran

Factory Composable dan Composable Berparameter

Membuat factory composable, membatasi state per instance, serta menghindari state singleton bersama.

Factory Composable dan Composable Berparameter 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.

Komposabel yang Menerima Parameter

Komposabel biasa mengembalikan perilaku yang tetap. Komposabel berparameter menerima argumen untuk menyesuaikan fungsinya — URL dasar, opsi, nilai bawaan — sehingga satu fungsi dapat digunakan untuk banyak kasus.

Komposabel Berparameter Sederhana

Berikan konfigurasi sebagai argumen. Di sini URL disediakan oleh pemanggil, sehingga satu useFetch dapat digunakan untuk endpoint apa pun.

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

Menerima Objek Opsi

Untuk banyak pengaturan, gunakan objek opsi dengan nilai bawaan. Cara ini membuat lokasi pemanggilan tetap mudah dibaca dan komposabel tetap fleksibel.

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

Apa Itu Pembuat Komposabel

Pembuat melangkah lebih jauh: ini adalah fungsi yang mengembalikan komposabel yang telah dikonfigurasi sebelumnya dengan pengaturan bersama. Anda melakukan konfigurasi sekali, lalu mendapatkan komposabel khusus untuk digunakan di berbagai komponen.

Membangun Pembuat

Fungsi luar menangkap konfigurasi bersama (misalnya baseURL); fungsi bagian dalam yang dikembalikan adalah komposabel, dengan konfigurasi yang tertanam melalui penutupan.

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

Menggunakan Pembuat

Panggil pembuat sekali (sering kali di modul bersama) untuk menghasilkan komposabel yang telah dikonfigurasi, lalu impor dan gunakan komposabel tersebut di mana pun.

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

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

State Terpisah untuk Setiap Instans

Setiap kali Anda memanggil komposabel, ref yang dibuatnya masih baru dan bersifat lokal untuk pemanggilan tersebut. Dua komponen yang memanggil useFetch mendapatkan ref data yang terpisah — tanpa berbagi secara tidak sengaja.

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

Singleton Bersama Tingkat Modul

Terkadang Anda WANT satu instans bersama. Deklarasikan state di tingkat modul (di luar fungsi), lalu komposabel menyimpan referensi ke state tersebut melalui penutupan — setiap pemanggil berbagi ref yang sama.

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

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

Per Instans vs Singleton

  • State di dalam fungsi → baru setiap pemanggilan (per komponen) — formulir, pengambil data.
  • State di tingkat modul → singleton bersama — pengguna saat ini, tema, penanda seluruh aplikasi.

Pilih berdasarkan apakah data tersebut bersifat lokal untuk komponen atau berlaku secara global.

Menggabungkan Pembuat dan Singleton

Pembuat juga dapat menghasilkan singleton: buat state bersama di dalam pemanggilan pembuat (yang berjalan sekali), lalu biarkan komposabel yang dikembalikan menyimpan referensi ke state tersebut melalui penutupan.

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

Kapan Menggunakan Pembuat

Gunakan pembuat ketika beberapa komposabel berbagi konfigurasi (URL dasar, header, instans klien), atau ketika Anda membangun pustaka kecil dan ingin penggunanya melakukan konfigurasi sekali. Jika tidak, komposabel berparameter lebih sederhana.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang pembuat komposabel dan penentuan scope.

Ringkasan

Anda telah mempelajari pembuat komposabel dan penentuan scope:

  • Komposabel berparameter menerima argumen atau opsi untuk menyesuaikan perilaku.
  • Pembuat adalah fungsi yang mengembalikan komposabel yang telah dikonfigurasi sebelumnya (konfigurasi ditangkap melalui penutupan).
  • State di dalam fungsi bersifat per instans; state di tingkat modul adalah singleton bersama.
  • Gunakan state per instans untuk data lokal komponen, dan singleton untuk state seluruh aplikasi (pengguna saat ini, tema).

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Factory Composable dan Composable Berparameter” gratis?

Ya — teks lengkap “Factory Composable dan Composable Berparameter” 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 “Factory Composable dan Composable Berparameter”?

Membuat factory composable, membatasi state per instance, serta menghindari state singleton bersama. 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 “Factory Composable dan Composable Berparameter” 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

  1. Reaktivitas Lanjutan: shallowRef dan triggerRef
  2. Factory Composable dan Composable Berparameter
  3. State Machine dengan XState di Vue
  4. effectScope untuk Effect yang Dikelompokkan
← Kembali ke Vue Academy