Nuxt 3：Pinia：为什么我的状态突变会破坏整个数组

Question

here lies my 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
})

I'd like to understand why when I increment or decrement a cart item starting from the second in the array, the array rearranges.

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 my Vue component, on incrementCartItem, I find out that the entire array kind of shuffles and pops out the one at the top, and replaces it with the item which is being mutated I don't think the array should be affected in any way.

Answer 1

Replace the item in the array with the updated one, using splice :

    incrementCartQuantity(id) {
      const index = this.CART.findIndex(i => i.$id === id);
      if (index > -1) {
        const item = { ...this.CART[index] };
        item.quantity++;
        this.CART.splice(index, 1, item)
      }
    }

Alternative syntax:

    incrementCartQuantity(id) {
      const index = this.CART.findIndex(i => i.$id === id);
      if (index > -1) {
        this.CART.splice(index, 1, {
          ...this.CART[index],
          quantity: this.CART[index].quantity + 1
        })
      }
    }