搜索

首页  >  问答  >  正文

Nuxt 3:Pinia:改变我的状态如何扭曲整个数组?

这是我的代码

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粉203792468P粉203792468273 天前447

全部回复(1)我来回复

  • P粉155832941

    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

    回复
    0
  • 取消回复