0Pricing
Vue Academy · Lezione

Factory di composable e composable parametrizzati

Creazione di factory di composable, ambito dello stato per istanza, prevenzione dello stato singleton condiviso.

Factory di composable e composable parametrizzati è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Composable che accettano parametri

Un composable semplice restituisce un comportamento fisso. Un composable parametrico accetta argomenti per personalizzare il proprio funzionamento — un URL di base, opzioni, valori predefiniti — consentendo a un’unica funzione di gestire molti casi.

Un composable parametrico semplice

Passi la configurazione come argomento. In questo caso l’URL viene fornito dal chiamante, quindi un unico useFetch funziona con qualsiasi endpoint.

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

Accettare un oggetto di opzioni

Quando sono disponibili molte impostazioni, accetti un oggetto di opzioni con valori predefiniti. In questo modo il punto di chiamata rimane leggibile e il composable resta flessibile.

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

Che cos’è una factory di composable

Una factory fa un passo ulteriore: è una funzione che restituisce un composable preconfigurato con impostazioni condivise. La configurazione viene eseguita una volta sola, dopodiché si ottiene un composable personalizzato da usare in più componenti.

Creare una factory

La funzione esterna acquisisce la configurazione condivisa (ad esempio baseURL); la funzione interna restituita è il composable, con la configurazione incorporata tramite closure.

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

Usare una factory

Chiami la factory una volta (spesso in un modulo condiviso) per produrre un composable configurato, quindi lo importi e lo utilizzi ovunque.

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

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

Stato isolato per istanza

Ogni volta che chiama un composable, i ref che questo crea sono nuovi e locali a quella chiamata. Due componenti che chiamano useFetch ottengono ref data indipendenti — senza condivisioni accidentali.

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

Singleton condiviso a livello di modulo

A volte si DESIDERA un’unica istanza condivisa. Dichiari lo stato a livello di modulo (all’esterno della funzione) e il composable lo acquisisce tramite closure — ogni chiamante condivide gli stessi ref.

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

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

Per istanza o singleton

  • Stato all’interno della funzione → nuovo a ogni chiamata (per componente) — moduli per i form, fetcher.
  • Stato a livello di modulo → singleton condiviso — utente corrente, tema, flag dell’intera applicazione.

Scelga in base al fatto che i dati siano locali al componente o globali.

Combinare factory e singleton

Una factory può anche produrre un singleton: crei lo stato condiviso all’interno della chiamata alla factory (eseguita una sola volta) e faccia in modo che il composable restituito lo acquisisca tramite closure.

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

Quando ricorrere a una factory

Utilizzi una factory quando diversi composable condividono la configurazione (URL di base, intestazioni, istanza del client) o quando crea una piccola libreria e desidera che gli utenti la configurino una sola volta. In caso contrario, un composable parametrico è più semplice.

Verifica rapida

Verifichi la Sua comprensione delle factory di composable e dell’ambito dello stato.

Riepilogo

Ha imparato a usare le factory di composable e a gestire l’ambito dello stato:

  • I composable parametrici accettano argomenti o opzioni per personalizzare il comportamento.
  • Una factory è una funzione che restituisce un composable preconfigurato (la configurazione viene acquisita tramite closure).
  • Lo stato all’interno della funzione è specifico di ogni istanza; lo stato a livello di modulo è un singleton condiviso.
  • Utilizzi lo stato specifico dell’istanza per i dati locali al componente e il singleton per lo stato dell’intera applicazione (utente corrente, tema).

Domande Frequenti

La lezione «Factory di composable e composable parametrizzati» è gratuita?

Sì — il testo completo di «Factory di composable e composable parametrizzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Factory di composable e composable parametrizzati»?

Creazione di factory di composable, ambito dello stato per istanza, prevenzione dello stato singleton condiviso. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Factory di composable e composable parametrizzati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Vue Academy?

Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Reattività avanzata: shallowRef e triggerRef
  2. Factory di composable e composable parametrizzati
  3. Macchine a stati con XState in Vue
  4. effectScope per raggruppare gli effetti
← Torna a Vue Academy