Nuxt 3：Pinia：改變我的狀態如何扭曲整個陣列？

Question

這是我的程式碼

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 上，我發現整個陣列都會進行洗牌並彈出頂部的數組，並將其替換為正在變異的項目 我認為數組不會受到任何影響。

Answer 1

您的find 方法正在執行賦值「=」而不是比較「= == 」。

替換

  this.CART.find(item => item.$id = id);

與

  this.CART.find(item => item.$id === id);

在兩種購物車方法中。

您的 find 每次執行時都會將搜尋到的 id 指派給第一個專案的 $id。