Define Store: Cart

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"?

¡Suscríbete y continúa aprendiendo!

Define Store: Cart