Cómo usar nuestro Store

Muy bien. Volviendo a nuestro proyecto. Habíamos definido un "store" con el nombre "cart". Este método "defineStore" nos devuelve un "useCartStore". Este "useCartStore" lo estamos exportando y es lo que vamos a usar para poder acceder a nuestro "store". ¿Entonces queremos usarlo en "ProductList"? Pues vamos a importarlo. Vamos a hacer un import de "useCartStore". De esta manera se está importando "useCartStore" a partir de este archivo "stores/cart". Lo que vamos a hacer es extraer los detalles desde el "store" para pasarlos al carrito de compras. O bien podemos acceder desde el carrito de compras directamente. Entonces vamos a cortar este import. No lo vamos a poner en "ProductList", sino que vamos a ir directamente al componente que lo necesita. Que en este caso es "cart" y desde aquí vamos a acceder al "store". Aquí hay un pequeño error, porque nosotros en una lección anterior hemos cambiado la ubicación de los tipos. Vamos a importar nuevamente "cartDetail" para que lo traiga de la sección que corresponde. No olvidemos que aquí debemos usar "import type" porque se trata de un tipo. Íbamos a agregar el import de nuestra "store" porque queremos hacer uso de él. Bien, antes este componente "cart" recibía por "props" los detalles. Ahora no, ahora este componente "cart" va a leer desde el "store" los detalles. Para ello nos vamos a apoyar de las "computed properties". Vamos a tener un objeto llamado "computed" y aquí vamos a definir una "computed property". En este caso será detalles, pero nosotros “detalles” es una "computed property". Esa "computed property" va a acceder al "store". ¿De qué manera? Pues vamos a crear una variable "cartStore". Íbamos a hacer uso de la función "useCartStore”. Queremos usar el "store". Entonces invocamos esta función. Y luego ya tenemos acceso al "store". Por lo tanto, "details" aquí es igual. "Details" es igual a “cartStore.details". Ya que "details" es un atributo del estado del "store", como podemos ver aquí. Dentro de la sección de "state". Para nuestro carrito tenemos "details". Por eso es que aquí podemos acceder de esta manera. Hacemos uso del "store" para acceder a "details" y dentro del componente "cart", este acceso para no escribirlo en el template, lo estamos poniendo dentro de una “computed property”. De esta manera, los detalles se mostrarán desde el "store". Vamos a hacer una prueba. Vamos a agregar un objeto por aquí con "productId : 100". Y con cantidad 20. Solo para verificar que esto esté funcionando. Muy bien, accedemos a nuestro proyecto desde el navegador y como podemos ver aquí, "ProductList" contiene un componente llamado "cart" y este componente llamado "cart" está accediendo a la información que nos proporciona el "store". Si nos dirigimos a la pestaña "cart", el componente "cart" está mostrando también la misma información. Esto es posible gracias a que no necesitamos pasarle por "props" la información al carrito. Estamos leyendo directamente desde el "store". El "store" nos ayuda a gestionar el estado de nuestro proyecto. Entonces esto forma parte de nuestro "store" y se lee para el componente "cart" que está puesto en “home”, pero que también está en "cart".

Crea una cuenta y continúa aprendiendo 🚀

Cómo usar nuestro Store