Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Cleanup y cómo ejecutar Store actions
Empezamos limpiando un poco nuestro código, porque ya no necesitamos enviar tantos props ni eventos. Luego vemos cómo invocar acciones de nuestro Store.
Accediendo a nuestro "store" para agregar productos al carrito
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.
Limpiando el proyecto
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 hacer uso de eventos también hacia arriba
si queremos comunicar información al componente padre.
En una lección anterior agregamos esto solo para demostrar que era posible.
Pero como ahora estamos haciendo uso de un store, nuestro proyecto queda más organizado.
Simplificando los componentes
Por ejemplo, nuestro componente App simplemente carga RouterView.
No hay que hacer nada más aquí.
Luego nos vamos a nuestras vistas:
-
HomeViewno necesita tener un propdetails.- Podemos eliminar esto.
- Antes lo necesitaba para poder pasarlo a
Cart. - Ahora, con nuestro
store, esto se simplifica.
-
CartViewcarga la página deCart, lo único que contiene es el componenteCart.- Antes le pasábamos por props los detalles.
- Ya no necesitamos esto ni declarar props.
- También queda más simple.
-
AboutViewno requiere cambios.- No tiene una sección de script, solo cuenta con una sección de templates.
Modificando "ProductList" y "ProductCart"
Dentro de la página de Home tenemos un componente llamado ProductList.
Este componente contiene varios ProductCart, y cada ProductCart tiene un botón Agregar al carrito.
Anteriormente, cuando se hacía click:
- Se emitía un evento desde
ProductCarthaciaProductList. - Luego, desde
ProductListhacia el componenteApp. - Así se notificaba y se agregaba el producto al carrito.
Ahora no necesitamos emitir tantos eventos porque podemos ejecutar la acción directamente sobre el store.
Pasos para simplificar:
- Eliminamos la sección de
emits, ya que el componente ya no emitirá eventos. - Eliminamos la línea que emitía el evento.
- Cuando se haga click en el botón Agregar al carrito, se llamará al método
onAppButtonClick. - Desde ahí accederemos al
store.
Accediendo al "store"
Para acceder al store, usamos useCartStore.
Este se está importando desde la sección de store, específicamente desde el archivo cart.ts.
No es necesario indicar la extensión al importarlo.
Una vez que tenemos acceso al store, podemos invocar sus métodos.
En este caso, llamaremos a addProduct.
El store espera un productID, por lo que debemos pasarlo correctamente.
Como cada Cart recibe el producto como prop, ya tenemos acceso a product, y podemos acceder a su id.
De esta manera invocamos la acción addProduct sobre el store y le pedimos que agregue este producto.
Probando en el navegador
Para probar esto en nuestro carrito:
- Dejamos el arreglo de detalles vacío para que inicialmente no tenga nada.
- En el navegador verificamos que no hay productos en el carrito.
- Hacemos click en Agregar al carrito:
- Click en una silla → Se agrega 1 silla.
- Otro click en la silla → Se agregan 2 sillas.
- Click en un monitor → Se agrega 1 monitor.
- Click en un micrófono → Se agrega 1 micrófono.
- Vamos a la página de
Carty vemos que la información se ha agregado correctamente.
Beneficios del "store"
Esto es muy bueno porque significa que:
- Podemos modificar el estado de nuestro
storedesde cualquier parte de nuestro proyecto. - Podemos acceder al estado de nuestro
storedesde cualquier parte del 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 permite definir esta store.
Por último, el primer import ya no está en uso porque estamos usando la sintaxis de Options API.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript