aqui esta mi codigo
import { defineStore } from "pinia"; export const DB_CART = defineStore("CART", { state: () => ({ CART: [ { $id: "62616ffc6d13e2a9eb04", quantity: 1 }, { $id: "6261711719aa15827836", quantity: 1 }, { $id: "6275c020740fbd04db50", quantity: 1 } ], }), actions: { // INCREMENT PRODUCT QUANTITY IN CART incrementCartQuantity(id) { const cartItem = this.CART.find(item => item.$id = id); cartItem.quantity++; }, // DECREMENT PRODUCT QUANTITY IN CART decrementCartQuantity(id) { const cartItem = this.CART.find(item => item.$id = id); if (cartItem.quantity === 1) return cartItem.quantity--; }, // ADD PRODUCT TO CART addToCart(item) { this.CART.push(item) } }, persist: true })Me gustaría entender por qué cuando aumento o disminuyo un artículo del carrito a partir del segundo en la matriz, la matriz se reorganiza.
incrementCartQuantity(id) { const cartItem = this.CART.find(item => item.$id = id); cartItem.quantity++; console.log(this.CART) /*EXPECTED OUTPUT [ { $id: "62616ffc6d13e2a9eb04", quantity: 1 }, { $id: "6261711719aa15827836", quantity: 1 }, { $id: "6275c020740fbd04db50", quantity: 1 } ] *//*RETURED OUTPUT [ { $id: "6261711719aa15827836", quantity: 2 }, { $id: "6261711719aa15827836", quantity: 1 }, INCREMENTED OBJECT { $id: "6275c020740fbd04db50", quantity: 1 } ] */ },en mi componente Vue, en incrementCartItem, descubrí que toda la matriz se baraja y aparece la que está en la parte superior, y la reemplaza con el elemento que se está mutando. No creo que la matriz deba verse afectada de ninguna manera. .
Su método de find está haciendo una asignación " = " en lugar de una comparación " === ".
Reemplazar
this.CART.find(item => item.$id = id);con
this.CART.find(item => item.$id === id);en ambos métodos de carro.
Su find asigna la identificación buscada a la $id id primer elemento, cada vez que se ejecuta.