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>