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

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

一、共享购物车状态

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

// 购物车
shopCart:[]

2、在store\index.js的mutations新增：

// 添加单个商品至购物车
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
    });
}

三、测试功能