Nuxt 3 + Pinia：修改购物车状态时数组异常变形问题

问题现象 #

在使用Pinia管理购物车状态时，对数组中第二个及以后的购物车项执行增减数量操作，数组会出现元素错乱：第一个元素被替换成当前修改项的$id，同时目标项保留原$id，导致数组出现重复$id的元素，顺序和数据都不符合预期。

原代码 #

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: {
        // 增加购物车商品数量
        incrementCartQuantity(id) {
            const cartItem = this.CART.find(item => item.$id = id);
            cartItem.quantity++;
        },
        // 减少购物车商品数量
        decrementCartQuantity(id) {
            const cartItem = this.CART.find(item => item.$id = id);
            if (cartItem.quantity === 1) return
            cartItem.quantity--;
        },
        // 添加商品到购物车
        addToCart(item) {
            this.CART.push(item)
        }
    },
    persist: true
})

问题根源 #

核心错误是把比较运算符===写成了赋值运算符=：

• 在find方法的回调函数中，item.$id = id不是判断元素的$id是否等于传入的id，而是将传入的id赋值给当前遍历到的元素的$id。
• 当find遍历数组时，第一个元素的$id会被直接改成目标id，赋值表达式返回的是这个id（属于真值），所以find会立即返回第一个元素，不会继续遍历后续元素。
• 之后对这个被修改了$id的第一个元素执行quantity++，就导致第一个元素变成目标项的$id且数量增加，而原本的目标项$id未被修改，最终数组中出现两个相同$id的元素，看起来像是发生了重排和替换。

解决方案 #

将find回调中的赋值运算符=替换为严格相等运算符===，确保正确匹配对应$id的购物车项，同时增加元素存在性判断避免报错：

// 修正后的增加数量方法
incrementCartQuantity(id) {
    const cartItem = this.CART.find(item => item.$id === id);
    if (cartItem) {
        cartItem.quantity++;
    }
},
// 修正后的减少数量方法
decrementCartQuantity(id) {
    const cartItem = this.CART.find(item => item.$id === id);
    if (cartItem && cartItem.quantity > 1) {
        cartItem.quantity--;
    }
}

内容的提问来源于stack exchange，提问作者Whyte