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
Cómo usar nuestro Store
Veamos cómo acceder al estado de nuestro store desde nuestros componentes, haciendo uso de computed properties.
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.
Importando useCartStore
¿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.
Ubicación correcta del import
Entonces vamos a cortar este import. No lo vamos a poner en ProductList, sino que vamos a ir directamente al componente que lo necesita.
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.
Lectura del store desde el componente cart
Íbamos a agregar el import de nuestra store porque queremos hacer uso de él.
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á details, pero details es una computed property.
Esa computed property va a acceder al store.
Creación de cartStore
¿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 = 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.
Prueba de funcionamiento
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.
Beneficio del 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.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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".
¿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