vue购物车中的全部选中和全部取消功能

vue购物车中的全部选中和全部取消功能-

------使用了状态管理
文件夹：cart
index.vue
store.js

购物车组件----index.vue中：

<template>
  <div class="container">
    <header class="header">购物车头部</header>
    <div class="content" v-if="len > 0">
      <input type="checkbox" v-model="all" @change="selectAll">
      <ul>
        <li v-for="(item, index) of cartlist" :key="item.id">
          <input type="checkbox" v-model="item.flag" @change="selectItem(item.flag)">
          {{ item.title }} - {{ item.price }} -
          <button @click="item.num = 1 ? item.num = 1 : item.num = item.num - 1">---</button>{{ item.num }} <button @click="item.num = item.num + 1">+++</button>
          <button @click="deleteItem(index, item.id)">删除</button>
        </li>
      </ul>
      <div>
        总数{{ totalNum }}
      </div>
      <div>
        总价{{ totalPrice }}
      </div>
    </div>
    <div class="content" v-else>
      您的购物车空空如也
      <router-link to="/home">去购物</router-link>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
  data () {
    return {
      all: false
    }
  },
  computed: {
    ...mapState({
      cartlist: ({ cart: { cartlist } }) => cartlist
    }),
    ...mapGetters(['totalPrice', 'totalNum', 'len'])
  },
  mounted () {
    this.getCartList()
  },
  methods: {
    ...mapActions({
      getCartList: 'getCartList'
      // changeSelect: 'changeSelect'
    }),
    selectAll () {
      console.log('111')
      this.$store.dispatch('changeSelect', { flag: this.all })
    },
    selectItem (flag) {
      this.$store.dispatch('changeItem', { flag }).then(data => {
        data === 1 ? this.all = false : this.all = true
      })
    },
    deleteItem (index, id) {
      this.$store.dispatch('deleteItem', { index, id })
    }
  }
}
</script>

store.js中：

// import axios from 'axios'
export default {
  state: {
    cartlist: [],
    lovelist: []
  },
  getters: {
    len (state) {
      return state.cartlist.length
    },
    totalPrice (state) {
      let totalPrice = 0
      state.cartlist.map(item => {
        item.flag ? totalPrice += item.num * item.price : totalPrice += 0
      })
      return totalPrice
    },
    totalNum (state) {
      let totalNum = 0
      state.cartlist.map(item => {
        item.flag ? totalNum += item.num : totalNum += 0
      })
      return totalNum
    }
  },
  actions: {
    getCartList ({ commit }) {
      let arr = [
        {
          id: 'item1',
          title: '商品1',
          price: 16,
          num: 2
        },
        {
          id: 'item2',
          title: '商品2',
          price: 15,
          num: 5
        },
        {
          id: 'item3',
          title: '商品3',
          price: 5,
          num: 1
        }
      ]
      setTimeout(() => {
        arr.map(item => {
          item.flag = false
        })
        commit('changeCartList', arr)
      }, 1500)
    },
    changeSelect ({commit, state}, { flag }) {
      console.log(state)
      let arr = state.cartlist
      arr.map(item => {
        item.flag = flag
      })
      commit('changeCartList', arr)
    },
    changeItem ({ commit, state }, { flag }) {
      let arr = state.cartlist
      return new Promise(resolve => {
        if (flag) {
          let test = arr.findIndex(item => item.flag === false)
          if (test === -1) { resolve(0)}
        } else { // 有没被选中
          resolve(1)
        }
      })
    },
    deleteItem ({ commit, state }, { index, id }) {
      setTimeout(() => {
        // 数据库删除成功
        let arr = state.cartlist
        arr.splice(index, 1)
        commit('changeCartList', arr)
      }, 500)
    }
  },
  mutations: {
    changeCartList (state, data) {
      state.cartlist = data
    }
  }
}

总的store.js中：

import Vue from 'vue'
import Vuex from 'vuex'
import cart from '@/views/cart/store'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    cart
  }
})