這是我的程式碼
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 })
我想了解為什麼當我從陣列中的第二個開始遞增或遞減購物車專案時,陣列會重新排列。
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 } ] */ },
在我的 Vue 元件中,在incrementCartItem 上,我發現整個陣列都會進行洗牌並彈出頂部的數組,並將其替換為正在變異的項目 我認為數組不會受到任何影響。
P粉1558329412024-03-28 15:26:21
您的find
方法正在執行賦值「=」而不是比較「= == 」。
替換
this.CART.find(item => item.$id = id);
與
this.CART.find(item => item.$id === id);
在兩種購物車方法中。
您的 find
每次執行時都會將搜尋到的 id
指派給第一個專案的 $id
。