Nuxt 3 : Pinia : Comment le changement d'état déforme-t-il l'ensemble du tableau ?

Question

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

Je veux comprendre pourquoi le tableau se réorganise lorsque j'incrémente ou décrémente l'élément du panier en commençant par le deuxième du tableau.

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

Dans mon composant Vue, sur IncreaseCartItem, je constate que l'ensemble du tableau est mélangé, fait apparaître le tableau supérieur et le remplace par l'élément qui est en train de muter. Je ne pense pas que les tableaux soient affectés de quelque façon que ce soit.

Answer 1

Votre find méthode effectue assignment"=" au lieu de compare"= ==".

Remplacement

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

et

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

Dans les deux méthodes de panier.

Votre find 每次运行时都会将搜索到的 id 分配给第一个项目的 $id attribuera le id recherché au $id du premier élément à chaque fois qu'il est exécuté.