vue+vuex+vant实现购物车全选反选和计算总价

vue+vuex+vant实现购物车全选反选和计算总价

**main.js中的vuex写法**
全选反选方法定义到mutations里：
mutations: {
    //全选
    checkAll(state, allVal) {
      state.all = allVal;
      state.carArr.map(val => {
        val.check = allVal
      })
      local.set("xiaomijia", { "info": state.carArr })
    },
    //反选
    fan(state) {
      let index = state.carArr.findIndex(val => { val.check == false })
      if (index == 1) {
        state.all = true
      } else {
        state.all = false
      }
      local.set("xiaomijia", { "info": state.carArr })
    }
  },
  计算总价方法定义到getter's里：
  //计算总价
    sumPrice(state) {
      let sum = 0;
      state.carArr.map(val => {
        if (val.check) {
          sum += val.minPrice * val.num
        }
      })
      return sum
    }
``
购物车里的写法：
<!-- 全选  复选框 -->
        <div>           
            <input type="checkbox" @change="checkAll" v-bind:checked="all"><span>全选</span>
        </div>
        <!-- 单选框 -->
 			<input type="checkbox" v-model="item.check" @change="fan">
 <script>
 import {mapState,mapMutations,mapGetters} from "vuex"
    export default {
        data(){
            return {
                all:true
            }
        },
        methods:{
            
            ...mapMutations(['jiaNum','jianNum','allCheck','del','fan']),
            checkAll(event){
                // console.log(event.target.checked);
                this.$store.commit("checkAll",event.target.checked)
            }
        },
 </script>