Cleanup y cómo ejecutar Store actions

En la lección anterior hemos visto cómo acceder a información de nuestro "store" desde un componente. Ahora vamos a ver cómo podemos ejecutar una acción sobre nuestro "store", en este caso para agregar productos al carrito. Pero antes vamos a limpiar un poco nuestro proyecto porque en algún momento lo hemos llenado con props sin un "store" necesitamos pasar por props hasta el componente hijo que requiere la información y necesitamos hacer uso de eventos también hacia arriba. Si queremos comunicar información al componente padre. En una lección anterior estuvimos agregando ello solo para demostrar que es posible. Pero como ahora estamos haciendo uso de un "store", nuestro proyecto queda más organizado. Por ejemplo, nuestro componente "app" simplemente carga "RouterView". No hay que hacer nada más aquí. Luego nos vamos a nuestras vistas. "HomeView" no necesita tener un prop details. Entonces podemos eliminar esto. Entonces no necesita tener details como props. Antes lo necesitaba para poder pasarlo a "cart". Ahora, con nuestro "store", esto se simplifica. Vamos ahora a "CartView". El componente "CartView" carga la página de "cart". Que es lo que vemos aquí. Lo único que contiene es el componente "cart". Y antes le pasábamos por props los detalles. Ya no necesitamos esto ni declarar props. Entonces también queda más simple. En "AboutView" no hay que hacer ningún cambio porque de hecho no hay una sección de script. Simplemente contamos con una sección de templates. Dentro de esta página de "home" tenemos un componente llamado "ProductList". Este componente llamado "ProductList" contiene en su interior varios “ProductCart” y cada "ProductCart" tiene un botón agregar al carrito. Anteriormente, cuando se hacía click, se emitía un evento desde “ProductCart” hacia “ProductList” y desde "ProductList" hacia el componente "app". Para notificar de esto y poder agregar al carrito. Ahora, en cambio, no necesitamos emitir tantos eventos porque podemos ejecutar la acción directamente sobre el "store". Entonces vamos a empezar eliminando esta sección de "emits", porque este componente ya no va a emitir un evento. Y vamos a eliminar esta línea que justamente se encargaba de emitir el evento. Cuando se haga click en el botón de Agregar al carrito, se llamará al método “onAppButtonClick”. Y aquí nosotros vamos a acceder al "store". Entonces vamos a escribir por aquí "cartStore". ¿De qué manera accedemos al "store"? Pues ya vamos a "useCartStore" y "useCartStore". Se está importando desde la sección de "store". Allí tenemos un archivo llamado "cart" "cart.ts", pero al momento de importar no es necesario indicar la extensión. Una vez que tenemos acceso al "store", ya podemos invocar a sus métodos, en este caso al método “addProduct”. Aquí vamos a tener que pasar según el formato que el "store" ha definido, o sea, en este caso vamos a tener que pasar un “productID” Como cada "cart" recibe el producto como prop, ya tenemos acceso a “product” y podemos acceder a su “Id”. De esta manera invocamos a la acción “addProduct” sobre el "store" y le pedimos que agregue este producto, entonces para probar esto en nuestro carrito vamos a dejar el arreglo de detalles vacío para que inicialmente no tenga nada. Entonces en el navegador vemos que no hay ningún producto agregado al carrito. Vamos a dar click aquí tenemos una silla, otro click, dos sillas, otro click, un monitor, otro click, un micrófono. Y si nos vamos a la página de "cart" vemos que la información ha sido agregada. Esto es muy bueno. ¿Qué quiere decir? Que podemos modificar el estado de nuestra “store” desde cualquier parte de nuestro proyecto y podemos acceder al estado de nuestra “store” también desde cualquier parte de nuestro proyecto. Este es el beneficio de hacer uso de "stores". Y en este caso, la definición de un "store" es súper sencilla. Gracias a Pinia. Pinia es el framework que nos está permitiendo definir esta “store”. El primer import ya no está en uso porque estamos usando la sintaxis de options API.

¡Suscríbete y continúa aprendiendo!

Cleanup y cómo ejecutar Store actions