31，购物车的全选，单选 。购物车总的件数，和总计

cart.vue

  async getData() {
      let res = await http.$axios({
        url: "/api/selectCart",
        method: "post",
        headers: {
          token: true,
        },
      });
      res.data.forEach((v) => {
        v["checked"] = true;
      });
      this.cardList(res.data);
      console.log(res.data);

给数据加一个checked   设置成true  并循环

 <div class="check">
            <van-checkbox v-model="item.checked"></van-checkbox>
          </div>

 mutations-types.js

//购物车
export const CART_LIST = "cartList";
export const CHECK_ALL = "checkAll";
export const UN_CHECK_ALL = "unCheckAll";
export const CHECK_ITEM = 'checkItem'

 cart.js

import {
  CART_LIST,
  CHECK_ALL,
  UN_CHECK_ALL,
  CHECK_ITEM,
} from "./mutations-types";
export default {
  state: {
    list: [], //是购物车的数据
    selectList: [], //选中的数据
  },
  getters: {
    isCheckedAll(state) {
      return state.list.length == state.selectList.length;
    },
    // 总件数，总价格
    total(state) {
      let total = {
        num: 0,
        price: 0,
      };
      state.list.forEach((v) => {
        if (v.checked) {
          // 件数相加
          total.num += parseInt(v.goods_num);
          // 总数= 价格乘数量
          total.price += v.goods_price * v.goods_num;
        }
      });
      return total;
    },
  },
  mutations: {
    [CART_LIST](state, cartArr) {
      state.list = cartArr;
      // console.log(cartArr);
      cartArr.forEach((v) => {
        state.selectList.push(v.id);
      });
    },
    //全选
    [CHECK_ALL](state) {
      state.selectList = state.list.map((v) => {
        v.checked = true;
        return v.id;
      });
    },
    //全不选
    [UN_CHECK_ALL](state) {
      state.list.forEach((v) => {
        v.checked = false;
      });
      state.selectList = [];
    },
    //单选
    [CHECK_ITEM](state, index) {
      console.log(state.list[index].id, state.selectList);
      let id = state.list[index].id;
      let i = state.selectList.indexOf(id);
      //能在selectList 找到对应的id  ,就删除
      if (i > -1) {
        // console.log(state.selectList);
        return state.selectList.splice(i, 1);
      }
      //如果之前没有选 中，就给  selectList添加一个id进去
      state.selectList.push(id);
    },
  },
  actions: {
    checkAllFn({ commit, getters }) {
      getters.isCheckedAll ? commit("unCheckAll") : commit("checkAll");
    },
  },
};

cart.vue

<template>
  <div class="cart container">
    <header>
      <ul>
        <li><i class="iconfont icon-fanhui" @click="$router.back()"></i></li>
        <li><span>购物车</span></li>
        <li><span>编辑</span></li>
      </ul>
    </header>
    <section v-if="list.length">
      <div class="cart-title">
        {{ isCheckedAll }}
        <van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
        <!-- value单向数据绑定 -->
        <span>商品</span>
      </div>

      <ul>
        <li v-for="(item, index) in list" :key="index">
          <div class="check">
            <van-checkbox
              @click="checkItem(index)"
              v-model="item.checked"
            ></van-checkbox>
          </div>
          <h2><img :src="item.goods_imgUrl" alt="" /></h2>

          <div class="goods">
            <div class="goods-title">
              <span>{{ item.goods_name }}</span>
              <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="goods-price">$ {{ item.goods_price }}</div>
            <van-stepper v-model="item.goods_num" />
          </div>
        </li>
      </ul>
    </section>
    <section v-else>
      没有购物车数据 ，
      <router-link to="/home">请先回主页</router-link>
    </section>
    <footer v-if="list.length">
      <div class="radio">
        <van-checkbox @click="checkAllFn" :value="isCheckedAll"></van-checkbox>
      </div>
      <div class="total">
        <div>
          共有
          <span class="total-active">{{ total.num }}</span>
          件商品
        </div>
        <div>
          <!-- 保留小数点后两位toFixed()  -->
          <span>总计：</span
          ><span class="total-active"
            >￥{{ total.price.toFixed(2) }}+0茶币</span
          >
        </div>
      </div>
      <div class="order">去结算</div>
    </footer>
  </div>
</template>

<script>
import http from "@/common/api/request.js";
import { mapMutations, mapGetters, mapState, mapActions } from "vuex";
export default {
  name: "Cart",
  data() {
    return {
      checked: true,
    };
  },
  computed: {
    ...mapState({
      list: (state) => state.cart.list,
    }),
    ...mapGetters(["isCheckedAll", "total"]),
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapMutations(["cartList", "checkItem"]),
    ...mapActions(["checkAllFn"]),
    async getData() {
      let res = await http.$axios({
        url: "/api/selectCart",
        method: "post",
        headers: {
          token: true,
        },
      });
      res.data.forEach((v) => {
        v["checked"] = true;
      });
      this.cartList(res.data);
      console.log(res.data);
    },
   
  },
};
</script>