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
Getter: Cart items count
Veamos cómo definir un Getter en nuestro Store, y cómo usarlo para mostrar la cantidad total de unidades en nuestro carrito de compras.
Obtener la cantidad de items en el carrito
Como queremos obtener aquí la cantidad de items en el carrito, vamos a pedirle esta información a nuestro store.
Accediendo al store
Nos dirigimos a la carpeta de stores y abrimos nuestro archivo Cart.ts, que es el que contiene nuestro store del carrito. Aquí vamos a usar justo lo que comentamos en una ocasión anterior: vamos a definir un getter.
Un getter es similar a una computed property pero no para componentes, sino más bien para stores.
¿Cuándo usar un getter?
Un getter lo usamos cuando queremos calcular un valor a partir del estado.
Por ejemplo, no tiene sentido definir un atributo adicional llamado cantidad de items, porque cada vez que agregamos un item al arreglo tendríamos que actualizarlo manualmente. Lo mismo ocurriría al eliminar un elemento. En realidad, este valor no forma parte del estado; el estado del carrito es simplemente los detalles que contiene.
Si queremos ver cuántos items hay agregados, basta con recorrer los detalles y sumar las cantidades.
Definiendo el getter
Vamos a definir un getter llamado cartItemsCount.
Este getter nos va a devolver la cantidad total de items en el carrito.
Por ejemplo:
- Si hay tres unidades de un producto y dos unidades de otro, el getter debe devolver
5.
Para probarlo, primero definimos el getter con un valor fijo:
return 100; // Solo para prueba
Accediendo al getter desde el top bar
En el top bar podemos definir una computed property, por ejemplo, itemsCount.
Para acceder al store:
- Definimos una variable llamada
cartStore. - Invocamos el método
useCartStore, que nos permitirá usar el store.
const cartStore = useCartStore();
Luego, accedemos al getter de esta manera:
computed(() => cartStore.cartItemsCount);
Finalmente, en la sección de template, reemplazamos el valor estático por nuestra computed property:
<span>{{ itemsCount }}</span>
Guardamos y, al abrir el navegador, veremos que el badge muestra 100. No importa en qué ruta estemos, este valor se mantiene.
Sumando la cantidad real de items
En lugar de mostrar 100, queremos mostrar la suma de las cantidades. Para lograrlo:
- Recorremos el arreglo de detalles.
- Declaramos una variable
countinicializada en0. - Iteramos sobre cada detalle y sumamos
detail.quantity.
Pinia se encarga de pasar el estado a nuestros getters.
Los getters siempre reciben el state como primer argumento:
state.details.forEach((detail) => {
count += detail.quantity;
});
Como TypeScript sabe que cada elemento del arreglo es un CartDetail, reconoce el atributo quantity.
Guardamos y verificamos en el navegador:
- El carrito comienza con
0elementos. - Agregamos un item: el contador aumenta.
- Agregamos otro del mismo tipo: el contador sube a
2. - Agregamos otro producto distinto: el contador sube a
3.
Si vamos a la página del carrito, veremos las tres unidades correctamente.
Ocultando el badge cuando no hay productos
Al inicio, el badge siempre muestra 0, lo que puede parecer extraño.
¿Cómo hacemos para ocultarlo cuando no hay productos en el carrito?
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Como queremos obtener aquí la cantidad de items en el carrito, vamos a pedirle esta información a nuestro store. Por lo tanto nos dirigimos a la carpeta de stores y abrimos nuestro archivo "Cart.ts", que es el que contiene nuestro store del carrito y aquí vamos a usar justo lo que comentamos en una ocasión anterior. Vamos a definir un getter. Un getter es similar a una computer property pero no para componentes, sino más bien para stores. ¿Sí? ¿En qué casos usar un getter? Un getter lo usamos cuando queremos calcular un valor a partir del estado. Por ejemplo, no tiene sentido definir acá un atributo más, llamado cantidad de items, porque cada vez que agregamos un item al arreglo tendríamos nosotros manualmente que aumentar este valor. Si eliminamos un elemento tendríamos nosotros manualmente que eliminar este valor, y en realidad, no forma parte del estado. El estado del carrito es simplemente los detalles que contiene. Si queremos ver cuántos items hay agregados basta con recorrer los detalles y sumar las cantidadess ¿sí? Por lo tanto vamos a definir un getter, que se va a llamar cart items count. Este getter nos va a devolver la cantidad de items en el carrito. Por ejemplo si hay tres unidades de un producto y hay dos unidades de otro, no importa vamos a sumar todo, y vamos a devolver el valor 5. Entonces aquí, este getter tiene que devolver la cantidad de items en el carrito. Por ejemplo vamos a poner return 100 para empezar, solamente para hacer una prueba. Si definimos un getter que devuelve 100, ¿cómo podemos acceder a este getter desde el top bar? En el top bar podemos definir una computed property. Nuestra computed property se puede llamar por ejemplo items count, y aquí nosotros vamos a acceder al store. ¿De qué manera accedemos al store? Pues definimos una variable llamada cart store, e invocamos al método use cart store. Este método use cart store siempre nos va a permitir usar al store como su mismo nombre lo indica. Usar cart store, esto nos devuelve cart store, ¿sí? Entonces a partir de allí, teniendo ya acceso al store, podemos acceder a sus getters. En este caso nos interesa el getter que se llama cart items count, que es el que está aquí, ¿sí? Aquí en la sección de template en vez de poner siempre 7, vamos a poner aquí nuestra computed property, que es en este caso items count. Entonces guardamos, y cuando nos vamos a navegador nos encontramos aquí con el valor de 100, ¿sí? No importa en qué ruta estemos, el valor de 100 está aplicado como badge sobre el botón de card. Entonces de esta manera es cómo podemos definir un getter en un store, y luego consumirlo desde cualquier componente, no importa dónde se encuentre. Puede ser un componente que esté dentro de muchos otros, o puede ser un componente que sea padre de todos los demás. No hay problema, podemos acceder siempre a través del store. En este caso, no queremos mostrar 100, queremos mostrar la suma de las cantidades. Por lo tanto vamos a recorrer el arreglo de detalles. Vamos a tener una variable count que empezará en cero, y luego vamos a iterar sobre todos los detalles. Pinia en este caso se va a encargar de pasarnos el estado, siempre, a nuestros getters. Normalmente definimos getters porque queremos calcular algo a partir del estado. Por lo tanto los getters tienen la característica de siempre recibir el state como primer argumento. Por lo tanto si queremos acceder a los detalles usaremos state, punto, details, punto, y en este caso vamos a usar un foreach. Un forecach para iterar sobre cada detalle. A cada detalle lo llamaremos detail, y vamos entonces aquí a sumar sobre count "detail.quantity", ¿sí? Como vemos quantity se autocompletó. Eso es gracias a que estamos haciendo uso de TypeScript. TypeScript sabe que cada elemento de este arreglo es un cart detail, y que por lo tanto, tiene un atributo quantity, ¿sí? Entonces de esta manera sumamos todas las cantidades y devolvemos count si guardamos y al volver a nuestro navegador nos encontramos con esto. El carrito tiene cero elementos. Vamos a agregar un item. Vemos que aumenta en uno. Vamos a agregar otro del mismo tipo: ya subió a dos. Vamos a agregar otro tipo de producto y ya teníamos tres items, ¿sí? Esto está muy bien. Si nos vamos a la página del carrito vamos a ver las tres unidades. Esto está bien, sin embargo, al inicio se ve un poco extraño, ¿sí? Empieza siempre en cero. ¿De qué manera podemos hacer que el badge no se muestre? Y se muestre sólo cuando hay productos en el carrito
¿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