一、前言
在上篇购物车中，如果用户刷新了当前的页面，底部导航中的数据又会恢复为原来的：
1、解决刷新，购物车上数值不变
2、在购物车点击加减按钮，数值做出对应变化
二、主要内容
1、实现效果：点击购物车的时候可以查看到购物车的商品信息
2、解决刷新，购物车上数值不变
（1）新建一个Cart.vue展示购物信息，并将路由添加到index.js中
（2）购物车里面涉及到：存储商品信息，获取商品信息，保存商品信息，这里将这些方法单独封装到一个.js文件中（本来需要在后台操作）
let obj={}; //定义一个对象，存储商品信息
//这里需要存储数据
//{商品的id, 商品的数量}
//保存商品
obj.saveGoods = function(goodsList){
window.localStorage.setItem('goodsList',JSON.stringify(goodsList))
}
//获取商品的值
obj.getGoodsList = function(){
return JSON.parse(window.localStorage.getItem('goodsList'|| '{}'))//如果stroge中没有值，返回一个空对象
}
//增加商品
obj.add = function(goods){
let goodsList = this.getGoodsList()//获取到storage里面的对象
if(goodsList[goods.id]){
//goods.id是商品的数量，对应有值的话就追加
goodsList[goods.id] = goodsList[goods.id] + goods.num;
}else{
goodsList[goods.id]=goods.num;
}
//传进来之后还需要保存
this.saveGoods(goodsList);
}
//获取购物车的总数量
obj.getTotalCount = function(){
let goodsList = this.getGoodsList();
let values = Object.values(goodsList);//Object.values返回的是一个数组，里面对应着每一个key的value
let sum = 0;
values.forEach(val => sum = sum +val);
return sum;
}
export default obj;
（2）封装好了方法就要在商品详情页面使用（类似于我们在淘宝上买东西，当你在商品详情页面点击加入购物车之后，购物车里面会有对应的商品）
name:'GoodsDetail',
data(){
return{
url:`getthumImages/${this.$route.params.id}`,
goodsInfo:{},//当前购物车的信息，里面有id
pickNum:1 ,
isExist:false //让小球默认是隐藏的状态，
}
},
methods:{
afterEnter(){
this.isExist=false; //显示出来之后执行这个，又将小球隐藏
this.$bus.$emit('sendPickNum',this.pickNum); //当触发了上面的事件之后，
GoodsTool.add({
id:this.goodsInfo.id,
num:this.pickNum
})
},
//点击加入购物车执行这个方法，然后让小球显示出来
ballHandler(){
this.isExist=true;
// this.$bus.$emit('sendPickNum',this.pickNum); //将当前的pickNum传过去，但是这个不能加在这里，否者一点击“加入购物车就传
},
（3）当你一刷新，stroge里面的数据清空，下面的购物车上面的数值又变成0了，所以在下面的底部导航里，让他一开始就获取到当前这个总数
created(){
//当你的组件一创建好了后就挂载这个bus公交车，$on这个事件监听
this.$bus.$on(`sendPickNum`, (data)=>{
this.pickNum=this.pickNum + data; /
}),
this.pickNum=GoodsTool.getTotalCount();//直接将这Goods.vue里面传来的数据赋值，
}
（4）通过以上思路，就能保证刷新页面时，购物车中的数据不发生改变
3、点击底部导航“购物车”，将上面加进的东西和数量展示在页面中，（在购物车点击加减按钮，数值做出对应变化）
（1）首先发送请求，这里发送请求的时候，需要之后再购物详情页面加入的商品的id, 然后根据对应的id拿到对应的请求数据
（2）拿到购物详情里面的id
let goodsList = GoodsTool.getGoodsList();//["88":5,"99":4] 第一个数商品id 第二个是商品数量
let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]
（3）拿到上面的id之后就可以发请求
created(){
let goodsList = GoodsTool.getGoodsList();//{"88":5,"99":4} 第一个数商品id 第二个是商品数量
let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]
if(ids){
this.$axios.get(`goods/getshopcarlist${ids}`)
.then(res=>{
this.shopCart=res.data.message;
}
})
}
（4）但是这里的后端数据库里并没有保存加入购物车的数量（如果有可以直接从后端获取），这里手动添加
created(){
let goodsList = GoodsTool.getGoodsList();//{"88":5,"99":4} 第一个数商品id 第二个是商品数量
let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]
if(ids){
this.$axios.get(`goods/getshopcarlist${ids}`)
.then(res=>{
this.shopCart=res.data.message;//返回的是一个数组
//给数组元素添加属性
for(var i=0; i<this.shopCart.length;i++){
let shop=this.shopCart[i];//获取到当前的对象
let num = goodsList[shop.id];//根据当前对象的id查找到对应的购物车数量
shop.num = num;//给每个对象添加一个num属性，并在视图上渲染，但是会发现视图上的值并没有改变
}
}
})
}
（5）在购物车列表做加减操作，并且将当前的对象传进去
<li class="p-list" v-for="(shop, index) in shopCart">
<mt-switch></mt-switch>
<img src="">
<div class="pay-calc">
<p>{{shop.title}}</p>
<div class="calc">
<span>￥777</span>
<span @click="substract(shop)">-</span>
<span>{{shop.num}}</span>
<span @click="addNum(shop)">+</span>
<a href="javascript:;">删除</a>
</div>
</div>
</li>
methods:{
addNum(shop){//每次点击都接受到当前的对象
shop.num++; //这里的值虽然加上了，但是，数据并没有响应上去，是因为created是一开始就加载的，后来点击修改了num的值，但是没有 响应视图
console.log(shop)
},
substract(shop){
if(shop.num==1){
return;
}
shop.num--;
}
},
（6）做完第五步，在测试的时候，发现控制台中打印出来的对象中num改变，但是视图上并没有改变
原因：vue 中存在一种机制会将shopCart(也就是你请求的数据进行监视)属性进行监视，完成响应式（因为后面的num是我们自己加进去的，没有挂载到数据属性里面,vue就会对这个属性进行监视，监视到数据不是完全挂载到数据属性上的，就无法完成响应操作）
在vue中的源码中会生成 Object.defineProperty(this, 'shopCart', { set:function(){ //判断shopCart元素是否有属性 })
解决方法：如果数据不完整挂载的情况在要添加属性，就需要手动通知vue完成响应式，==》双向数据绑定
created(){
let goodsList = GoodsTool.getGoodsList();//{"88":5,"99":4} 第一个数商品id 第二个是商品数量
let ids = Object.key(goodsList).join(',');//Object.key()获取key值 [88,99]
if(ids){
this.$axios.get(`goods/getshopcarlist${ids}`)
.then(res=>{
this.shopCart=res.data.message;//返回的是一个数组
//给数组元素添加属性
for(var i=0; i<this.shopCart.length;i++){
let shop=this.shopCart[i];//获取到当前的对象
let num = goodsList[shop.id];//根据当前对象的id查找到对应的购物车数量
if(num){
shop.num = num;
this.$set(shop, 'num', num);//自己给这个数据进行双向数据绑定
this.$set(shop,'isSelected',true);
}
}
})
}
三、总结
踩坑一：自己收动添加的属性,需要用$set()给这个属性绑定
踩坑二：vue 中存在一种机制会将shopCart(也就是你请求的数据进行监视)属性进行监视，完成响应式（因为后面的num是我们自己加进去的，没有挂载到数据属性里面,vue就会对这个属性进行监视，监视到数据不是完全挂载到数据属性上的，就无法完成响应操作）