No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Métodos personalizados con Composition API

23/37
Recursos

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

En el fascinante mundo del desarrollo web, dominar el Composition API de Vue.js abre un sinfín de posibilidades. Este enfoque ofrece una manera más flexible y funcional de estructurar tus aplicaciones. Vamos a explorar cómo puedes crear tus propios métodos personalizados utilizando esta potente herramienta.

¿Qué pasos seguir para definir métodos en el Composition API?

Lo primero que debes saber es que cualquier método que definas en el Composition API debe ser parte del bloque setup. Aquí es donde las referencias reactivas, tan cruciales para construir interfaces de usuario dinámicas, cobran vida. Siguiendo estos pasos, lograrás crear funciones personalizadas:

  1. Definir las referencias reactivas: Tanto los códigos de descuento como los productos deben ser definidos mediante el uso de ref y reactive, asegurándote de que Vue.js observe y gestione adecuadamente los cambios en el estado.

  2. Crear funciones independientes: Las funciones, como applyDiscount o addToCart, pueden ser creadas sin necesidad de adherirse a parámetros específicos como en el Options API.

  3. Retornar las funciones creadas: Una vez definidas las funciones dentro del setup, deben ser retornadas para que puedan ser utilizadas en el template.

Por ejemplo, así podría lucir el código para aplicar un descuento:

const applyDiscount = (event) => {
    // Lógica para aplicar el descuento utilizando discountCodes.
};

// Retornar la función para que pueda ser llamada desde el template
return {
    applyDiscount
};

¿Cómo evitar errores comunes al trabajar con referencias?

Uno de los errores más comunes al trabajar con referencias en el Composition API es olvidar acceder al valor mediante .value. Aquí están algunos consejos para evitar estos inconvenientes:

  • Uso correcto de .value: Cada vez que accedes o modificas una referencia, asegúrate de hacerlo a través de refName.value. Esto garantiza que estás interactuando con el valor verdadero y no con el contenedor proxy.

  • Despapelización automática en templates: Ten en cuenta que Vue.js manejará automáticamente ref.value dentro de los templates, lo cual simplifica mucho el uso.

Para ilustrarlo en un contexto de carrito de compras:

const cart = ref([]);

// Para agregar un producto al carrito
cart.value.push(newProduct);

// En el template puedes usar simplemente
{{ cart.length }}

¿Cómo mejorar la organización del código en setup?

El Composition API es extremadamente flexible, y te permite organizar el código como prefieras, pero hay formas de mejorarlo para mantener un código limpio y mantenible:

  • Agrupar funciones relacionadas: Puedes decidir agrupar tus métodos y referencias en módulos o categorías lógicas dentro de setup, creando secciones claras para manipulación de estado, efectos secundarios, etc.

  • Reutilización de lógica: Considera extraer lógica común en funciones utilitarias o composables que puedan ser reutilizados en diferentes partes de tu aplicación.

  • Documentación y comentarios: Mantén tu código bien documentado. Los comentarios pueden ser cruciales, especialmente en secciones del setup que contengan lógica compleja.

Con estas recomendaciones, no solo dominarás el Composition API, sino que también podrás construir aplicaciones Vue.js más eficientes y fáciles de mantener. ¡Sigue explorando y expandiendo tus habilidades!

Aportes 6

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En la linea 113 falto cambiar la contante product por:

product.value.stock -= 1

En el Composition API se nota como todo el código empieza a quedar más junto 👀 Cosa que en el Options API estaba por separado (unas partes en el bloque de data, otras partes en los bloques de methods, etc.)
.
Una forma fácil de “traducir” de Options a Composition es recordar que todo lo que tenga this en Options será reemplazado por un value en composition, con la única diferencia de que en Options this va al inicio de los nombres de tus propiedades y en Composition value va al final 👀

// Options
this.product

// Composotion
product.value

Dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/1df1c253776c066eca6d7ea1a573dc1862109a5d

Tambien note que si colocas toda la logica de algun tipo en una funcion es todavia mas legible

Esta seria la funcion

function test() {
	const discontCodes = ref([
        	"test", 1
	]);

        function applyDiscont(event) {
        	console.log("TEST", discontCodes.value);
                discontCodes.value[1]++;
                return;
       }

      return {
           discontCodes,
           applyDiscont
      }
}

despues solo la importas en el setup() usando el spread para colocar todo lo retornado por la funcion directo en el arreglo del setup()

setup() {
	return {
		...useTest()
	}
}

De escribir this.variable ahora escribimos variable.value.
😄

NO OLVIDAR EL VALUE!

function applyDiscount(e) {
          const discountCodeIndex = discountCodes.value.indexOf(e.target.value);
          if (discountCodeIndex >= 0) {
            product.value.price *= 50 / 100;
            discountCodes.value.splice(discountCodeIndex, 1); // remove 1 element of discountCodes in index
          }
        }

Para este punto el curso ya se digiere mucho mejor.