Getter: Cart items count

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

¡Suscríbete y continúa aprendiendo!

Getter: Cart items count