0Pricing
Vue Academy · Lección

Factorías de composables y composables parametrizados

Creación de factorías de composables, delimitación del estado por instancia y prevención del estado singleton compartido

Factorías de composables y composables parametrizados es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Composables que aceptan parámetros

Un composable sencillo devuelve un comportamiento fijo. Un composable parametrizado acepta argumentos para personalizar lo que hace —una URL base, opciones, valores predeterminados—, lo que permite que una misma función cubra muchos casos.

Un composable parametrizado sencillo

Pase la configuración como argumentos. Aquí la persona que llama proporciona la URL, por lo que un único useFetch funciona con cualquier 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 }
}

Aceptar un objeto de opciones

Cuando hay muchas opciones, acepte un objeto de opciones con valores predeterminados. Así se mantiene la legibilidad del lugar donde se realiza la llamada y el composable sigue siendo flexible.

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

¿Qué es una fábrica de composables?

Una fábrica va un paso más allá: es una función que devuelve un composable preconfigurado con ajustes compartidos. Se configura una vez y después se obtiene un composable adaptado para usarlo en distintos componentes.

Crear una fábrica

La función externa captura la configuración compartida (por ejemplo, baseURL); la función interna que devuelve es el composable, con la configuración incorporada mediante un 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 }
  }
}

Usar una fábrica

Llame a la fábrica una vez (a menudo en un módulo compartido) para producir un composable configurado; después, impórtelo y úselo en cualquier lugar.

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

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

Estado delimitado por instancia

Cada vez que se llama a un composable, los refs que crea son nuevos y locales a esa llamada. Dos componentes que llaman a useFetch obtienen refs data independientes; no se comparten accidentalmente.

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

Singleton compartido a nivel de módulo

A veces SÍ se desea una única instancia compartida. Declare el estado a nivel de módulo (fuera de la función) y el composable lo capturará mediante un cierre; todas las personas que lo llamen compartirán los mismos refs.

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

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

Por instancia frente a singleton

  • Estado dentro de la función → nuevo en cada llamada (por componente): formularios, fetchers.
  • Estado a nivel de módulo → singleton compartido: usuario actual, tema, indicadores de toda la aplicación.

Elija según si los datos son locales al componente o globales.

Combinar fábrica y singleton

Una fábrica también puede producir un singleton: cree el estado compartido dentro de la llamada a la fábrica (que se ejecuta una vez) y haga que el composable devuelto lo capture mediante un cierre.

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

Cuándo recurrir a una fábrica

Use una fábrica cuando varios composables compartan configuración (URL base, encabezados, instancia del cliente) o cuando cree una biblioteca pequeña y quiera que quienes la consuman configuren todo una sola vez. En los demás casos, un composable parametrizado es más sencillo.

Comprobación rápida

Compruebe su comprensión de las fábricas de composables y del alcance.

Resumen

Ha aprendido sobre las fábricas de composables y el alcance:

  • Los composables parametrizados aceptan argumentos u opciones para personalizar su comportamiento.
  • Una fábrica es una función que devuelve un composable preconfigurado (la configuración se captura mediante un cierre).
  • El estado dentro de la función es específico de cada instancia; el estado a nivel de módulo es un singleton compartido.
  • Use instancias independientes para datos locales al componente y un singleton para el estado de toda la aplicación (usuario actual, tema).

Preguntas frecuentes

¿La lección «Factorías de composables y composables parametrizados» es gratis?

Sí — el texto completo de «Factorías de composables y composables parametrizados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Factorías de composables y composables parametrizados»?

Creación de factorías de composables, delimitación del estado por instancia y prevención del estado singleton compartido Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Factorías de composables y composables parametrizados»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Reactividad avanzada: shallowRef y triggerRef
  2. Factorías de composables y composables parametrizados
  3. Máquinas de estados con XState en Vue
  4. effectScope para agrupar efectos
← Volver a Vue Academy