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
Samuel Burbano
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?