vue手机商城项目实战（10）-购物车组件实现

1、在购物车中没有商品时，显示购物车为空图片，图片下载：
[dltable file=”空购物车图片” size=”5.9kb”]本地下载[/dltable]

2、解压后上传至assets\img目录下

修改Shopcar.vue如下：

程序员导航

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

立即访问

修改store\index.js：
1、在mutations中新增以下方法：

// 改变商品选中状态
changeSelected(state,index){
	state.shopCart[index].selected = !state.shopCart[index].selected;
},
// 删除商品
removeFromCart(state,index){
	state.shopCart.splice(index,1);
},
// 改变购物车商品数量
changeCartNum(state,playload){
	var index = playload.index;
	var changeNum = playload.changeNum;
	state.shopCart[index].num += changeNum;
},
// 全选或全不选
changeSelectedAll(state){
	// 获取是否为全选状态
	var flag = this.getters.isSelectAll;
	// 如果全选,则全不选,没全选则全选
	for(var i=0;i
2、新增getters属性如下：
getters:{
	// 是否全选
	isSelectAll(state){
		for(var i=0;i
四、测试效果