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

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

 // 购物车 shopCart:[] 

2、在storeindex.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 }); }