Nuxt 3: Pinia: Wie verzerrt eine Änderung meines Status das gesamte Array?

Question

Das ist mein Code

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
})

Ich möchte verstehen, warum sich das Array neu anordnet, wenn ich den Warenkorbartikel ausgehend vom zweiten im Array erhöhe oder dekrementiere.

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 }
        ]
  */
 },

In meiner Vue-Komponente auf incrementCartItem stelle ich fest, dass das gesamte Array gemischt wird und das oberste Array geöffnet und durch das Element ersetzt wird, das mutiert Ich glaube nicht, dass Arrays in irgendeiner Weise betroffen sind.

Answer 1

您的 find 方法正在执行赋值“=”而不是比较“= ==”。

替换

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

与

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

在两种购物车方法中。

您的 find 每次运行时都会将搜索到的 id 分配给第一个项目的 $id。