Detalle: Aumentar y disminuir unidades

Bien. Aunque yo no lo muestre, siempre recuerda crear commits por cada cambio que vas introduciendo sobre tu proyecto, e ir subiendo estos commits a tu repositorio remoto. Por ejemplo, aquí creo un commit llamado: agregar un store para los ítems del carrito, agregar un badge, y agregar una lista de categorías a la izquierda, ¿sí? Hice un commit, con el comando git commit guión m, y luego hice "git push origin master", para subir lo que tengo en origin. Es decir, de manera local sobre master, que es el repositorio remoto que está vinculado a este proyecto, ¿sí? Entonces vamos a continuar y lo que vamos a hacer ahora es agregar la funcionalidad de eliminar ítems del carrito porque actualmente se pueden agregar productos pero si vamos a visualizar el carrito de compras no hay una opción para eliminar ítems de cada producto. Entonces nos vamos a dirigir a nuestro componente Cart, ya que el componente cart es el que se encarga de mostrar los detalles del carrito, y vamos a eliminar los import que no están en uso. Bien. Para cada list item vamos a agregar un botón. En este caso un botón va a estar definido por la etiqueta v-button. Vamos a tener un botón para aumentar la cantidad y un botón para disminuir la cantidad, ¿sí? De tal manera que vamos a conseguir este resultado. De hecho vamos a situar la cantidad entre un botón y otro, de tal manera que se pueda disminuir y aumentar la cantidad, haciendo clic en estos botones, ¿sí? Bien. Para que esto funcione vamos a agregar un evento de clic sobre cada botón, y vamos a hacer que cada botón llame a un método del componente cart. Entonces, aquí vamos a tener un método increment quantity y vamos a enviar aquí el product ID. Este evento de click va a llamar un método dentro de nuestro componente. Vamos a tener de hecho dos métodos: uno llamado decrement quantity y otro llamado increment quantity, para disminuir y para aumentar respectivamente. Ambos métodos reciben como argumento el product ID. Entonces vamos a agregar una sección llamada métodos en la sección de script, y aquí vamos a tener cada uno de estos métodos. Por ejemplo decrement quantity va a estar por acá y vamos a tener también increment quantity. ¿Sí? De esta manera. Bien, de qué manera podemos modificar la cantidad, de un producto, si es que el estado no está aquí. Si es que el estado se encuentra dentro de un store, pues lo primero es venir al store, y definir una acción que permita hacer ello. Por ejemplo el store actualmente tiene una acción llamada Add Product. Vamos a definir entonces un método increment, y un método decrement. Ambos métodos van a recibir un Product ID, y este Product ID va a ser un number. La lógica entonces sería primero encontrar el detalle y luego aumentar la cantidad. Como eso ya lo hemos hecho anteriormente para Add Product, simplemente copiamos esta línea, y aquí vamos a poner nuestra condición. Buscamos el detalle correspondiente y si se encontró, vamos a hacer detail found, punto quantity, más igual uno, ¿sí? En el caso de decrement, será muy similar, solo que en vez de más igual uno, haremos menos igual uno. Guardamos y tenemos dos acciones, y vamos a invocarlas desde nuestro componente. ¿De qué manera podemos hacerlo? Pues lo primero es acceder al store y luego desde el store ya vamos a poder invocar a las acciones. Por ejemplo en este caso vamos a invocar increment y vamos a pasar aquí el Product ID. El Product ID lo estamos recibiendo como argumento y es un number. En realidad acá debería ser decrement, y vamos a seguir la misma idea para increment. En ambos casos accedemos al store, y luego invocamos a la acción que corresponde. Guardamos. En el navegador vamos a hacer una prueba. Le damos clic al botón de más, aumentó la cantidad. Le damos clic al botón de menos, disminuyó la cantidad, ¿sí? Eso nos permite modificar la cantidad de unidades que queremos pedir de cada producto. Sin embargo esto se comienza a volver un poco repetitivo. Como puedes ver aquí dice useCartStore, aquí también dice useCartStore y aquí nuevamente dice useCartStore. ¿De qué manera podemos mejorar esto? Con el conocimiento que ya tenemos, una forma sería la siguiente. Vamos a crear una computed property en nuestro componente y vamos a llamar esta computed property CartStore. ¿Qué va a hacer CartStore? Pues va a hacer lo que nos devuelve el método useCartStore. Si hacemos eso, aquí podemos usar "this". De esta manera accedemos a la computed property, que a su vez hace uso de este método, y accedemos a los detalles. Y seguimos la misma idea, arriba. Ambos métodos van a acceder a la computed property, y la computed property siempre se va a encargar de darnos acceso al store, adecuadamente. Entonces guardamos y al actualizar vemos que podemos agregar productos. y vemos que los botones continúan funcionando correctamente.

Crea una cuenta y continúa aprendiendo 🚀

Detalle: Aumentar y disminuir unidades