0Pricing
Vue Academy · Lección

useCounter: Un composable sencillo

ref para el contador, funciones para incrementarlo y decrementarlo, reinicio y exposición únicamente de lo necesario

useCounter: Un composable sencillo 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.

Construcción de useCounter

Escribiremos un composable pequeño pero completo: useCounter. Gestiona un número y expone métodos para modificarlo: es un primer composable perfecto.

Aceptación de un valor inicial

Proporcione a la función un parámetro initial con un valor predeterminado para que quienes la llamen puedan iniciar el contador desde cualquier valor.

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

La ref count interna

En su interior, cree una ref para el contador e inicialícela con el valor inicial. Este es el estado reactivo que gestiona el composable.

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

La función increment

Defina una función que modifique la ref. Como count es reactivo, todos los consumidores se actualizan automáticamente.

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

decrement y reset

Agregue las acciones complementarias. reset utiliza el initial original capturado en el cierre.

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

Devolver la API

Devuelva un objeto con el estado reactivo y todos los métodos. Esta es la interfaz pública del composable.

return { count, increment, decrement, reset };

El composable completo

Al unirlo todo, el resultado es compacto y reutilizable en cualquier componente.

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

Uso en un componente

Llámelo en <script setup> y desestructure el resultado. La plantilla puede usar count directamente (se desenvuelve automáticamente) y vincular los métodos.

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

En la plantilla

Vincule los métodos a botones. Cada clic modifica la ref compartida y la vista se actualiza.

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

Instancias independientes

Cada llamada a useCounter crea su propia ref count. Dos componentes que la llamen obtienen contadores independientes y aislados.

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

Agregar valores calculados

Puede enriquecer el composable con estado derivado, como un isZero calculado, y devolverlo junto con el resto.

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

Comprobación rápida

¿Por qué cada llamada a useCounter obtiene su propio estado?

Resumen

Ha construido useCounter(initial): una ref count interna, las funciones increment/decrement/reset y un objeto devuelto que expone el estado reactivo junto con los métodos. Cada llamada produce una instancia independiente.

Preguntas frecuentes

¿La lección «useCounter: Un composable sencillo» es gratis?

Sí — el texto completo de «useCounter: Un composable sencillo» 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 «useCounter: Un composable sencillo»?

ref para el contador, funciones para incrementarlo y decrementarlo, reinicio y exposición únicamente de lo necesario 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 «useCounter: Un composable sencillo»?

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. Qué caracteriza a un buen composable
  2. useCounter: Un composable sencillo
  3. useFetch: Un composable para datos asíncronos
  4. VueUse: La biblioteca de composables
← Volver a Vue Academy