No tienes acceso a esta clase

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

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

0D
11H
2M
48S

Watchers con Options API

30/37
Recursos

Aportes 8

Preguntas 2

Ordenar por:

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

o inicia sesi贸n.

Yo conoc铆 el handler() y el deep gracias a una chapuza que estaba haciendo con Vue xD
.
Un watcher, como su nombre lo indica, va a estar observando por cambios dentro de la variable (u objeto) que le pasemos, es decir, en cuanto este cambie, autom谩ticamente se va a ejecutar el c贸digo que pongamos dentro y podemos modificar el estado de nuestra aplicaci贸n.

El handler() y el deep son b谩sicamente otra forma de definir watchers en Vue, pero pas谩ndole m谩s opciones, ese deep indica que no importa qu茅 tan profundo sea un cambio, el handler se va a disparar (el handler es toda la l贸gica de nuestro watcher). Por ejemplo:

const algo = [
	[
		{
			algoProfundo: {
				algoMasProfundo: 1
			}
		}
	]
]

En esta variable, vemos que tenemos una propiedad llamada algoMasProfundo que est谩 dentro de un objeto que est谩 dentro de otro objeto que est谩 dentro de un arreglo que est谩 dentro de otro arreglo, a eso se le llama 鈥減rofundidad鈥, por lo que si definimos el deep en el watcher, si llega a cambiar ese algoMasProfundo en alg煤n momento, Vue se dar谩 cuenta y reaccionar谩 a ese cambio mediante el handler(), eso es lo incre铆ble de Vue:D
.
Dejo el c贸digo de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/433aaa90b3c963bbd4299b3efb56d0df05a6ec78

Dejo el rgb para lo que copien mas facilmente

"rgb(104, 104, 209)"

Excelente clase, me confund铆 un poco con lo de handler y depp entonces dejo mis apuntes y agradecer铆a si est谩n correctos o entend铆 mal ajaja (Y en caso que est茅n bien pues que les sirva jaja)

  • En caso de ser una estructura muy compleja utilizamos:
watch: {
// Observar cambios sobre cart que tiene productos
    cart: {
      handler(cart) {
	// Generaar total mediante reduce
        this.total = cart.reduce((prev, curr) => {
        const prevPrice = prev.price || prev;
        const prevQuantity = prev.quantity || 1;
        return prevPrice * prevQuantity + curr.price * curr.quantity;
        }, 0);
      },
	// Autorizar la b煤squeda m谩s profunda
      deep: true
    }
  }
}

En este caso vamos a observar Cart (Carrito de compras) que contiene varios elementos Product por ello:

  • Usamos deep: true para escuchar a profundidad
  • Funci贸n handler(valor){} para generar los procedimientos al ocurrir un cambio

Los watcher nos permiten observar los valores de una propiedad reactiva. Una funci贸n dentro del watcher, recibe 2 par谩metros que son: el valor actual y el valor anterior. Tambi茅n se pueden agregar watcher a una propiedad de un objeto, para ello se define el nombre del watcher como un string y el nombre corresponde a la propiedad que queremos observar.

Tambi茅n podemos definir un watcher sobre un objeto y lo definimos con la funci贸n handler, esto generalmente lo hacemos para las propiedades que son arreglos de objetos donde queremos observar cada uno de los objetos del arreglo.

Los Watchers nos permiten gestionar las dependencias que autom谩ticamente gestiona Vue

Comparto documentaci贸n del Reduce de Javascript para recordar:
[https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce](Documentacion MDN)

Una forma m谩s simplificada de usar el reduce en el handler para obtener el total del carrito:

 this.totalCarrito = newValue.reduce((sum, item) => {
                return item.price * item.quantity + sum;
              }, 0);

Desde la perspectiva de un usuario, me parece mala idea poner en rojo en precio siendo que quedan pocos productos, refuerza el precio y quiz谩s me haga no querer hacer ese gasto.
En cambio, opt茅 por mejor poner en rojo el texto 鈥溌ueda solamente 1 producto!鈥, pues da sentido de urgencia a las pocas existencias.
Estos peque帽os detalles son muy importantes para un e-commerce.