No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Watchers con Composition API

31/37
Recursos

Aportes 3

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Tratar茅 de simplificar esto:
.
Para definir watchers en Composition API, usamos la funci贸n watch(), esta funci贸n recibe dos par谩metros:
.

  1. Un objeto reactivo
  2. En handler del watcher
    .
    Entonces, con objeto reactivo nos referimos a algo que Vue pueda hacer tracking (recordemos las bases de la reactividad), un objeto reactivo puede ser un Proxy, esto es porque, si recordamos las primeras clases, nosotros pod铆amos convertir en Proxys los objetos, y cada que intent谩bamos acceder a una propiedad de ese objeto pod铆amos interceptarlo con get. Pero los Proxys solo son f谩ciles de trabajar para reactividad con objetos (un JSON, un Arreglo, una funci贸n), pero son m谩s complicados de trabajar con un valores planos (por ejemplo, un n煤mero o un string).
    .
    Es decir, imaginemos, 驴C贸mo le aplicar铆as un Proxy a un objeto JSON? F谩cil, le pasas dicho objeto al proxy, y pueden interceptar el get y el set porque t煤 puedes acceder y establecer propiedades dentro de un JSON, bien hasta ah铆, pero ahora, 驴C贸mo le aplicar铆as un proxy al n煤mero 鈥0鈥 por ejemplo? Es m谩s dificl, no tienes un getter o un setter para ese tipo plano, no es un objeto que puedas acceder, es un tipo plano, por eso es que Watcher no acepta tipos planos.
    .
    Entonces, para solucionar esto, lo que hacemos es pasarle una funci贸n an贸nima que retorna ese tipo plano, una funci贸n s铆 puedes ser convertida en Proxy f谩cilmente, as铆 que podemos acceder a sus getters y setters, y ya Vue hace el resto de la magia, es por eso que debemos mandar una funci贸n an贸nima en los watchers, as铆 Vue puede convertirla en un Proxy y hacer su magia Vuet谩stica!
    .
    Dejo el c贸digo de esta clase:
    .
    https://github.com/RetaxMaster/vue3-platzi-commerce/tree/5437cefac6dbe4906e0f5fdb78a7854cffe0d9d6

Entend铆 c贸mo utilizarlo, pero me quedaron 2 dudas:

  • 驴Por qu茅 retornar en una funci贸n an贸nima? esa parte no la entend铆
  • 驴Los Array son los 煤nicos que no necesitan la funci贸n an贸nima? o tambi茅n si es un Objeto? o cu谩les valores no necesitan esto?

De resto excelente clase profe

Para utilizar los watcher en composition API, debemos utilizar un elemento de Vue llamado watch en el componente app. Dentro de los par谩metros de la funci贸n watch, debemos declarar una funci贸n an贸nima para obtener los valores de la propiedad reactiva

watch(() =>productoState.activeImage,(val,oldvalue)=>{});
al final de la funci贸n watcher de la propiedad observada, agregamos una propiedad llamada deep:true, que indica que se har谩 de una manera profunda. Esto lo utilizamos para los arreglos