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

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

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

// 购物车
shopCart:[]

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

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

// 添加单个商品至购物车
addToCart(state,goods){
	var shopCart = state.shopCart;
	var flag = true;
	// 判断购物车中是否已经存在该商品
	for(var i=0;iVue.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
	});
}