Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Veamos cómo acceder al estado de nuestro store desde nuestros componentes, haciendo uso de computed properties.
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
.
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.
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.
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
.
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
.
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
.
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
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.