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
Define Store: Cart
En esta lección creamos nuestro primer store, llamado Cart, para gestionar el estado de nuestro carrito de compras.
Modificando el "store" para el carrito de compras
En la lección anterior hemos comentado que tenemos un store de ejemplo llamado counter.
Nosotros vamos a modificarlo para crear nuestro propio store y lo usaremos para gestionar allí información sobre el carrito de compras.
Partiendo desde el ejemplo de Vue
En la documentación de Vue tenemos un ejemplo de cómo definir un store usando Options API.
Vamos a partir desde este ejemplo.
Vamos a definir un store con el nombre cart porque define a nuestro carrito de compras.
Definiendo el estado del "store"
¿Cuál va a ser el estado de este store?
En el ejemplo teníamos dos variables.
En nuestro caso, vamos a definir un arreglo llamado details. Aquí vamos a contener los detalles que se han ido agregando al carrito de compras.
Por ahora, vamos a comentar este getter. Vamos a trabajar primero solo con un estado básico.
Definiendo una acción para agregar productos
Lo que sí vamos a definir más bien es una acción. Una acción que nos va a permitir agregar un producto.
Si nosotros llamamos a la acción addProduct y pasamos un productId, que es un número, vamos a actualizar nuestro arreglo details.
Aquí tendremos nuestra lógica:
- Agregar un elemento más si este producto no se encuentra registrado.
- Aumentar su cantidad si el producto ya está registrado.
Esta lógica ya la hemos escrito anteriormente dentro del componente ProductList, porque en aquel entonces este era el componente más general.
Reutilizando la lógica de agregar productos
Vamos a reutilizar la lógica del método addProduct.
Este método se encargará de:
- Buscar dentro del arreglo
detailssi ya hay un producto con elproductIdque se nos está pasando. - Si existe (
detailFound), aumentamos su cantidad en uno. - De lo contrario, hacemos
pushpara agregar un nuevo objeto.
Definiendo el tipo de datos en el estado
Este arreglo empezará vacío, pero debemos indicar cuál será su tipo de dato.
Como es un arreglo, su tipo de dato será array, pero específicamente queremos que contenga objetos de un tipo determinado.
Nuestros tipos se encuentran definidos en la carpeta model, en el archivo types. Allí tenemos un tipo llamado cartDetail. Vamos a agregar esta definición.
Para poder usarlo, debemos importarlo con:
import type { cartDetail } from "@/model/types";
Ahora que hemos definido el tipo de dato, la alerta que obteníamos desaparece porque cada elemento dentro de details realmente tendrá un productId.
Guardamos cambios y finalizamos el "store"
Hasta aquí:
- Hemos definido nuestro primer
store. - Nuestro
storeconsta de unstatellamadodetails, que es un arreglo de detalles. - Tiene una
actionllamadaaddProduct, que agrega elementos al arreglodetailso bien actualiza un detalle encontrado y aumenta su cantidad.
Renombrando el archivo
Le cambiaremos el nombre al archivo para que coincida con el nombre del store.
El archivo se llamará cart.ts. En su interior encontramos defineStore y le pasamos la cadena "cart".
También podemos modificar el export para que la constante exportada se llame useCartStore.
¿Cómo usar el "store"?
Bien, ya tenemos nuestro store. La siguiente pregunta es: ¿Cómo podemos usar este store?
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
En la lección anterior hemos comentado que tenemos un "store" de ejemplo llamado "counter". Nosotros vamos a modificarlo para crear nuestro propio "store" y lo usaremos para gestionar allí información sobre el carrito de compras. En la documentación de Vue. Tenemos un ejemplo de cómo definir un "store" usando options API. Vamos a partir desde este ejemplo. Vamos a definir un "store" con el nombre "cart" porque define a nuestro carrito de compras. Ahora bien, ¿Cuál va a ser el estado de este "store"? En el ejemplo teníamos dos variables. En nuestro caso, vamos a definir un arreglo llamado "details" y aquí vamos a contener a los detalles que se han ido agregando al carrito de compras. Por ahora vamos a comentar este "getter". Vamos a trabajar primero solo con un estado básico. Y lo que sí vamos a definir más bien es una acción. Una acción que nos va a permitir agregar un producto. Si nosotros llevamos a la acción al “product” y pasamos aquí un “productId”, que es un número, vamos a terminar actualizando nuestro arreglo "details" y aquí vamos a tener nuestra lógica de agregar un elemento más si este producto no se encuentra registrado o aumentar su cantidad, si es que el producto ya está registrado. Esta lógica ya la hemos escrito anteriormente. Esa lógica la escribimos en una lección anterior dentro de nuestro componente "ProductList", porque en aquel entonces este era el componente más general. Entonces vamos a reutilizar esta lógica, este método "addProduct", entonces se va a encargar de buscar dentro del arreglo de detalles, si es que ya hay un producto con el ID que se nos está pasando. De ser así, "detailFound" será ese producto y aumentaremos su cantidad en uno de caso contrario, vamos a hacer "push" para agregar un objeto nuevo. Ahora bien, este es un arreglo que va a empezar vacío, pero tenemos que indicar cuál va a ser su tipo de dato. Como es un arreglo, el tipo de dato será “array”, pero específicamente, queremos que este arreglo contenga objetos de un tipo determinado. En este caso, nuestros tipos se encuentran definidos dentro de la carpeta "model" en nuestro archivo types. Aquí tenemos un tipo llamado "cartDetail". Por lo tanto, vamos a agregar aquí esta definición. Para poder usar esto, tenemos que importar el tipo. Eso lo hacemos usando "import type" y vamos importar de esta manera a "cartDetail". Como ya estamos definiendo aquí el tipo de dato, el alerta que aquí obteníamos desaparece porque ahora se puede validar que cada elemento dentro de "details" realmente tenga un "productId". Entonces, hasta aquí guardamos cambios y ya tenemos nuestro primer "store". Nuestro "store" consta de un "state" que en este caso se llama "details" y es un arreglo de detalles. Consta también de un "action". En este caso se llama a “addProduct” y de esta manera nosotros agregamos elementos sobre el arreglo “details” o bien actualizamos un detalle encontrado y aumentamos su cantidad. Este sería nuestro primer "store". Le vamos a cambiar de nombre al archivo para que coincida con el nombre del “store”. El archivo se llama “cart.ts” en su interior, encontramos “defineStore" y le pasamos aquí la cadena ”cart”. Y por último, también podemos modificar aquí este export para que la constante exportada se llame y “useCartStore". Bien, ya tenemos nuestro "store". La siguiente pregunta es ¿Cómo podemos usar este "store"?
¿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