vue手机商城项目实战(9)-添加购物车功能实现

Web前端 潘老师 4年前 (2020-09-20) 4949 ℃ (0) 扫码查看

本文接:vue手机商城项目实战(8)-路由跳转转场过渡动画效果实现
我们添加购物车的操作有两个地方,一个是首页商品列表Goods.vue和商品详情页GoodsDetail.vue,下面我们来实现添加到购物车功能。

1、我们购物车信息会被购物车组件使用,所以我们将购物车商品信息存放在vuex中,在store\index.jsstate新增购物车属性:

// 购物车
shopCart:[]

2、在store\index.jsmutations新增:

// 添加单个商品至购物车
addToCart(state,goods){
    var shopCart = state.shopCart;
    var flag = true;
    // 判断购物车中是否已经存在该商品
    for(var i=0;i<shopCart.length;i++){
        if(shopCart[i].id == goods.id){
            // 存在则数量加1
            shopCart[i].num++;
            flag = false;
            break;
        }
    }
    // 购物车中不存在该商品-首次添加
    if(flag){
        // goods新增选中状态默认未选中,数量默认1
        Vue.set(goods,'num',1);
        Vue.set(goods,'selected',false);
        shopCart.push(goods);
    }
}

修改首页商品列表Goods.vue和商品详情页GoodsDetail.vue
1、两个组件都导入Toast用于提示

import { Toast } from 'mint-ui';

2、两个组件都导在methods内都新增添加到购物车的方法:

// 添加至购物车
addToCart(goods){
    // 加购
    this.$store.commit("addToCart",goods);
    // 提示
    Toast({
      message: '加购成功',
      duration: 1000
    });
}

vue手机商城项目实战(9)-添加购物车功能实现


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1298.html
喜欢 (11)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】