基于Vuex实现小米商城购物车（下）

vuex的mutations：

updateShoppingCart(state, payload) {
  // 更新购物车
  // 可更新商品数量和是否勾选
  // 用于购物车点击勾选及加减商品数量
  if (payload.prop == "num") {
    // 判断效果的商品数量是否大于限购数量或小于1
    if (state.shoppingCart[payload.key].maxNum < payload.val) {
      return;
    }
    if (payload.val < 1) {
      return;
    }
  }
  // 根据商品在购物车的数组的索引和属性更改
  state.shoppingCart[payload.key][payload.prop] = payload.val;
}

vuex的actions：

updateShoppingCart({ commit }, payload) {
  commit('updateShoppingCart', payload);
}

8. 是否勾选商品
思路：

购物车每个商品都有一个勾选框，使用element-ui 的el-checkbox实现，结算时提交全部勾选的商品。
通过 change 事件获取到勾选框的状态（true或false）、购物车商品的索引(即数组的索引)；
通过vuex的 Actions (updateShoppingCart)，修改购物车商品的勾选状态；

html:

<div class="pro-check">
  <el-checkbox :value="item.check" @change="checkChange($event,index)"></el-checkbox>
</div>

逻辑代码如下：

checkChange(val, key) {
  // 更新vuex中购物车商品是否勾选的状态
  this.updateShoppingCart({ key: key, prop: "check", val: val });
}

说明： 此处使用的vuex的mutationsvuex和actions，和修改商品数量的是同一个，两个场景，通过传递的参数不同进行区分。修改商品数量时传递参数是{ key: key, prop: "num", val: val }，是否勾选商品传递的参数是{ key: key, prop: "check", val: val }，请注意prop的变化。
9. 是否全选商品
思路：

购物车设置了一个全选框，通过v-model绑定isAllCheck。
isAllCheck**值是通过计算属性的 getter获取vuex中的getters.getIsAllCheck;
vuex中的getters.getIsAllCheck通过遍历购物车数组，判断每一个商品勾选状态，只要有一个商品没有勾选，getIsAllCheck均为false，否则为true；
当点击全选框，通过计算属性的 setter 调用vuex的Actions (checkAll)，更改每个商品的勾选状态，从而修改全选框的状态。
 

<div class="pro-check">
  <el-checkbox v-model="isAllCheck">全选</el-checkbox>
</div>

逻辑代码如下：

computed: {
  isAllCheck: {
    get() {
      return this.$store.getters.getIsAllCheck;
    },
    set(val) {
      this.checkAll(val);
    }
  }
}

vuex的getters：
getIsAllCheck(state) {
  // 判断是否全选
  let isAllCheck = true;
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    // 只要有一个商品没有勾选立即return false;
    if (!temp.check) {
      isAllCheck = false;
      return isAllCheck;
    }
  }
  return isAllCheck;
}

vuex的mutations：
checkAll(state, data) {
  // 点击全选按钮，更改每个商品的勾选状态
  for (let i = 0; i < state.shoppingCart.length; i++) {
    state.shoppingCart[i].check = data;
  }
}
复制代码vuex的actions
checkAll({ commit }, data) {
  commit('checkAll', data);
}

10. 计算购物车中商品的总数量
在购物车页面和根组件的顶部导航栏使用。

vuex的getters：
getNum(state) {
  // 购物车商品总数量
  let totalNum = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    totalNum += temp.num;
  }
  return totalNum;
}

11. 计算购物车中勾选的商品总数量
在购物车页面和结算页面使用。

vuex的getters：
getCheckNum(state) {
  // 获取购物车勾选的商品总数量
  let totalNum = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    if (temp.check) {
      totalNum += temp.num;
    }
  }
  return totalNum;
}

12. 计算购物车中勾选的商品总价格
在购物车页面和结算页面使用。

vuex的getters：
getTotalPrice(state) {
  // 购物车勾选的商品总价格
  let totalPrice = 0;
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    if (temp.check) {
      totalPrice += temp.price * temp.num;
    }
  }
  return totalPrice;
}

13.生成购物车中勾选的商品详细信息
在结算页面使用。

vuex的getters：
getCheckGoods(state) {
  // 获取勾选的商品信息
  // 用于确认订单页面
  let checkGoods = [];
  for (let i = 0; i < state.shoppingCart.length; i++) {
    const temp = state.shoppingCart[i];
    if (temp.check) {
      checkGoods.push(temp);
    }
  }
  return checkGoods;
}

总结
至此，购物车的前端部分已经全部实现：从数据库同步购物车数据，根据购物车数据动态生成购物车页面，添加商品到购物车，删除购物车中的商品，修改购物车商品的数量，是否勾选购物车商品，是否全选购物车商品， 计算购物车中商品的总数量，计算购物车中勾选的商品总数量，计算购物车中勾选的商品总价格，生成购物车中勾选的商品详细信息。