Métodos personalizados con Composition API

Aprende a crear métodos personalizados con Composition API sin complicarte con la magia del Options API. Verás cómo manejar referencias reactivas, usar .value correctamente, conectar eventos como key up y construir funciones como apply discount y add to cart que interactúan de forma clara con tu template.

¿Cómo crear métodos personalizados con Composition API?

Trabajar en setup es directo e imperativo. Definimos referencias para la información reactiva y creamos funciones como en cualquier app de JavaScript. No hay que ubicarlas dentro de options: simplemente se definen y se retornan desde setup para usarlas en el template.

• Define referencias para códigos de descuento, producto y carrito.
• Crea funciones puras y pásalas al template.
• Evita depender de this: en setup no existe this.

¿Por qué en setup no existe this?

Dentro de setup trabajas con funciones de nivel superior y variables en tu alcance directo. No hay this que apunte al componente. Por eso accedes a las referencias que definiste, como discount codes, product o cart, sin usar this.

• Usa referencias reactivas y su .value para leer/escribir datos.
• Piensa de forma imperativa: defines y usas lo que necesitas.

¿Cómo aplicar un descuento con apply discount y event?

Se define una función, por ejemplo applyDiscount, y se retorna desde setup para invocarla desde el template. En el template se le pasa el flag especial de event que contiene la información del evento de JavaScript (como key up).

• La búsqueda de códigos se hace sobre discount codes usando .value.
• Evita acceder a product directo: usa product.value.
• Al presionar Enter en key up, el descuento se aplica correctamente.

import { ref } from 'vue'

const discountCodes = ref([])
const product = ref({ quantity: 1 })

function applyDiscount(event) {
  // Usar discountCodes.value y product.value.
  // Buscar el código recibido desde event y actualizar el producto.
}

export default { setup() { return { applyDiscount } } }

¿Qué errores comunes con refs y value?

Un error frecuente es intentar usar la referencia directamente como si fuera el valor. Recuerda: el valor real está en .value porque internamente es un proxy que View observa.

• Usa discount codes.value, no discount codes.
• Usa product.value, no product.
• En templates, Vue desempaqueta por ti: no necesitas .value en expresiones como cart.length.

¿Cómo agregar productos al carrito con add to cart?

Puedes ordenar el código de setup como prefieras. Define la función addToCart cerca de la lógica del carrito. Asegúrate de insertar en el carrito el objeto del producto, no la referencia.

• cart es una referencia a un arreglo: manipula cart.value.
• Inserta una copia del objeto: por ejemplo, con el spread de product.value.
• Envía addToCart desde setup y llámala en el botón add to cart del template.

const cart = ref([])

function addToCart() {
  // Insertar el objeto del producto, no la referencia.
  cart.value.push({ ...product.value })
}

export default { setup() { return { addToCart, cart, product } } }

¿Cómo manipular cart y product con value?

Cambia lecturas y escrituras a través de .value. Para agregar, usa cart.value.push(...). Para leer datos del producto, usa product.value.

• cart.value es el arreglo donde se insertan productos.
• product.value es el objeto del producto que se agrega.
• Evita mutar la referencia directamente sin .value.

¿Cómo mostrar la cantidad con cart.length y quantity?

En el template, Vue desempaqueta las referencias. Por eso, cart.length funciona sin .value. Para mostrar la cantidad del producto, usa el campo product.quantity.

• Muestra el número de elementos con cart.length.
• Muestra la cantidad con product.quantity entre paréntesis.
• Si falta quantity, defínela en el objeto del producto con valor 1.

<!-- Ejemplo de template -->
<button @click="addToCart">add to cart</button>
<span>{{ cart.length }}</span>
<span>({{ product.quantity }})</span>
<input @keyup="applyDiscount(event)" />

¿Qué ajustes finales mejoran la experiencia?

Hay detalles que evitan confusiones y errores:

• Elimina timeouts innecesarios cuando ya no aportan.
• Define product.quantity = 1 cuando no exista.
• Presiona Enter en key up para aplicar el código de descuento, por ejemplo: Plati.

¿Te gustaría ver otras formas de organizar código en Composition API o refactorizar estos métodos? Comparte tu duda o caso en los comentarios.