加入商品到购物车

添加商品到vuex;

// 将商品加入购物车,并且对count数量进行统计
mutations: {
  addCart(state, payload) {
     // payload新添加的商品
     let oldProduct = null;
     for(let item of state.cartList){
       if(item.iid === payload.iid) {
         oldProduct = item;
       }
     }
     // 判断oldProduct
     if (oldProduct) {
        oldProduct.count += 1;
     } else {
        payload.count = 1;
        state.cartList.push(payload);
     }
  }
}

mutations: {
  addCart(state, payload){
    let oldProduct = state.cartList.find(item => {
       item.iid === payload.iid
    });
    // 判断oldProduct
     if (oldProduct) {
        oldProduct.count += 1;
     } else {
        payload.count = 1;
        state.cartList.push(payload);
     }
  }
}

两个操作一个方法，跟踪的不确定性。

mutations做的事情要尽可能的单一。

代码重构：
// mutations唯一的目的就是修改state中的状态
// mutations中的每个方法尽可能完成的事件都比较单
// 一点。

mutations: {
 // mutations唯一的目的就是修改state中的状态
 // mutations中的每个方法尽可能完成的事件比较单一一点
 addCounter(state, payload) {
    payload.count++;
 },
 addToCart(state, payload) {
   state.cartList.push(payload);
 }
}
actions: {
  addCart(context, payload){
    // 1. 查找之前数组中是否有该商品
    let oldProduct = state.cartList.find(item => {
       item.iid === payload.iid
    });
    
    // 2. 判断oldProduct
    if(oldProduct) {
       // oldProduct.count += 1
       context.commit('addCounter', oldProduct);
    } else {
       payload.count = 1;
       // context相当于store对象，拥有commit分发到mutations中的方法,和state对象
       // context.state.cartList.push(payload);
       context.commit('addToCart', payload);
    }
  }
}

vuex给我们提供了新的操作方法：

// getter.js
export default {
  cartLength(state) {
    return state.cartLength.length;
  },
  cartList(state) {
    return state.cartList();
  }
}
// mapGetters
// 如何把getters里面的东西
import {mapGetters} from 'vuex'
//对象语法和数组语法
//mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性
computed: {
  ...mapGetters([cartLength, cartList]);
  ...mapGetters({
     length： 'cartLength',
     list: 'cartList'
  }) 
}

展示购物车：将cartList购物车中的所有数据都拿到，在购物车里面做一个展示就可以了。

scroll必须有确定的高度，不能滚动可能是有一些其他的原因。

不要改界面，要改模型。是否选中是放在模型里面。在模型里面改的，修改模型里面的数据。

工具栏显示按钮：

小结：
十六. 详情页回到顶部：
**home.vue和detail.vue回到顶部: mixin

十七. 点击加入购物车
17.1 监听加入购物按钮都点击，并获取商品信息。
** 监听
** 获取商品信息：iid/price/image/title/desc
17.2 将商品添加加到vuex
** 安装vuex
** 配置vuex
** 定义mutations，将商品添加到state.cartList;
** 重构代码：
** 将mutations中的代码抽取到actions中(定义两个mutations)
** 将mutations/actions单独抽取到文件中

十八. 购物车的展示
18.1 购物车导航栏的战术

18.2 购物车商品的展示
** CartList -> Scroll(滚动问题)
** CartListItem -> CheckButton
############
18.3 底部工具栏的安装
** 全选按钮
** 计算总价格
** 去计算