当前位置：首页 > news >正文

uniapp-商城-72-shop（5-商品列表，步进器添加商品到的购物车实现）

news 来源：原创 2025/6/1 13:39:31

我们通过前面的章节已经将数据添加到了购物车，但实际上购物车的处理还有很多东西需要完成。

我们看看如何将商品添加到购物车。

本文介绍了购物车功能的实现方式，重点讲解了如何将商品添加到购物车以及购物车状态管理的处理机制。主要内容包括：1. 通过Vuex管理购物车状态，包括商品列表、总价和商品数量计算；2. 购物车组件实现，包含商品显示、数量修改和清空功能；3. 商品添加逻辑处理，包括规格商品识别和数量更新规则；4. 使用Vue的深度监听机制实现购物车数据与页面步进器的同步更新。系统采用Vuex集中管理状态，通过getters暴露接口，实现了购物车数据的统一管理和高效更新。

1. 从shop页面的商品组件上的步进器添加数据到购物车

1.1 页面使用该步进器组件

步进器，前面已经将了，car-layout 见 5 节再分析

<car-layout v-if="buyNum>0"></car-layout>

1.2 v-if="buyNum>0 这里做了一个判断就是有没有数据有就显示该组件，没有就不显示

该值是通过vuex来控制的。只有这样才方便管理。

1.2.1 第一 shop就是要引入 vuex

    import {
        mapState,
        mapMutations,
        mapGetters
    } from "vuex"

1.2.2 第二 shop 解构 getter

        computed: {
            ...mapGetters(["buyNum", "carsList", "brandData"])
        },

2、购物车 vuex 的car.js处理

2.1 vuex---> 建立store文件夹，创建modules---->cars.js

2.2 定义cars的 state，默认时间是空的购物车

    state:{
        carsList:[]
    },

2.3 定义mutations，定义方法SET_CARS_LIST操作购物车列表

        SET_CARS_LIST(state, params = null) {
            //如果数据null，那就是为空，清空购物车就调用这里，或者说添加到购物车的数据为空
            if (!params) return state.carsList = [];
            // 一开始就定义，params为一个对象{item,num}，然后拿到后，再解构出来，便于后面使用
            let {item,num} = params;
            // console.log(params);

2.3.1 商品数据解构，生成一个商品的数据对象

            //解构 item，生成一个购物车商品元素对象的键值对
            let caritem = {
                goodsid: item._id || item.goodsid,
                numvalue: num,
                name: item.name,
                price: item.price,
                before_price: item.before_price,
                thumb: item.thumb,
                skuArr: item.skuArr || null,   //skui标识出有可能是来至于选规格添加的商品，并带sku，有可能是来至于商品详情页面的商品，有可能是来自于步进器的数据
                add: item.add || false   //增加一个标识，有这个add标识的就被识别为购买商品来至于--- 选规格或者商品详情页面。
            }

2.3.2 获取购物车中商品的序号

            // 获取购物车中已有商品，所在的序号，并对刚刚添加到购物车中的商品与已存在商品进行比对，看看是不是同一个商品
            let idx = state.carsList.findIndex(car => {
                // 判断存在商品中sku与刚刚添加商品的sku的一致性
                if (car.skuArr) {
                    return car.goodsid == caritem.goodsid && JSON.stringify(car.skuArr.sort()) == JSON
                        .stringify(caritem.skuArr.sort())
                    //判断选的规格是不是一样的，先进行数组排序，然后转成字符串进行比较，如果true 返回购物车中存在的商品序号
                } else {
                    // 如果没有sku，就直接判断商品在数据库中的 _id
                    // goodsid 和 item._id是赋值相等的
                    // 如果 id 等就返回购物车中存在的商品序号
                    return car.goodsid == caritem.goodsid
                }
            })