En la linea 113 falto cambiar la contante product por:
product.value.stock -= 1
Introducción: fundamentos de Vue.js
¿Cómo convertirte en frontend developer con Vue.js?
La magia de aprender JavaScript
¿Qué es Vue.js? Frameworks, librerías y componentes
Declarative rendering con JavaScript
Declarative rendering con Vue.js
Reactividad a profundidad
¿Qué es la reactividad?
¿Qué es un Proxy?
Crea tu propio miniframework: MiniVue
Implementando un Proxy en MiniVue
Implementando Reflect en MiniVue
Reactividad con effect, track y trigger
Implementando effect, track y trigger en MiniVue
Templates de Vue.js
Disclaimer sobre los Templates
Proyecto: PlatziCommerce con Vue.js
Expresiones
Atributos
Conditional rendering
List rendering
Event handling
APIs internas de Vue.js
Options API vs. Composition API
data() y ref()
Métodos personalizados con Options API
Métodos personalizados con Composition API
reactive()
Segunda capa: componentes de Vue.js
Componentes de Vue con Options API
Componentes de Vue con Composition API y props
Reto con componentes
Custom events o eventos personalizados con Options API
Custom events o eventos personalizados con Composition API
Watchers con Options API
Watchers con Composition API
Computed properties con Options API
Computed properties con Composition API
Ciclos de vida de un componente
Ciclos de vida de un componente: Composition API
Siguientes pasos
Continúa tu ruta de aprendizaje profesional con Vue.js
Siguientes pasos con Vue.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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:
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.
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
.
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
};
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 }}
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
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?