Vuex實(shí)現(xiàn)購(gòu)物車小功能的方法

<template>
 <div id="app">
  <div class="nav-top">
   <!--  標(biāo)簽欄-->
   <van-nav-bar
    title="商品列表頁(yè)"
    left-arrow
   />
  </div>
  <div class="nav-bottom">
   <!--  商品卡片-->
   <van-card
    v-for="item in goodsList"
    :price="item.actualPrice"
    :desc="item.desc"
    :title="item.dtitle"
    :thumb="item.mainPic"
   >
   <template #num>
    <van-icon name="shopping-cart-o" color="red" size="24px" @click="add(item)"/>
   </template>
   </van-card>
  </div>
 </div>
</template>

<script>

 export default {
  data() {
   return {
   goodsList: [], // 商品列表數(shù)據(jù)
   }
  },
  // 請(qǐng)求商品列表數(shù)據(jù)
  mounted() {
  // 接口不予展示，有需要請(qǐng)自行下載
   this.$axios.get('api接口').then(res => {
   this.goodsList = res.data.data.data
   // console.log(this.goodsList)
   })
  },
  methods: {
   // 添加商品 調(diào)用vuex中的add方法
   add(item) {
   this.$store.commit('add', item)
   }
  }
 }
</script>

<style lang="scss" scoped>
 #app {
  .nav-top {
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9;
  }
  .nav-bottom {
   margin-top: 50px;
  }
 }
</style>

<template>
 <div>
  <!--  標(biāo)簽欄-->
  <van-nav-bar
   title="購(gòu)物車"
   left-arrow
   @click-left="back"
  />
  <!--  購(gòu)物車box -->
  <div class="car-box" v-for="(item,index) in list" :key="index">
   <!-- 左側(cè)復(fù)選框布局-->
   <div class="car-box-left">
   <van-checkbox v-model="item.ckd"></van-checkbox>
   </div>
   <!-- 右側(cè)商品卡片布局-->
   <div class="car-box-right">
   <van-swipe-cell>
    <van-card
      :price="item.item.actualPrice"
      :title="item.item.dtitle"
      :thumb="item.item.mainPic"
    >
     <!-- 步進(jìn)器-->
     <template #num>
      <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
         @change="changeNum(item.num)"/>
     </template>
    </van-card>
    <!--  右側(cè)滑動(dòng)刪除-->
    <template #right>
     <van-button square text="刪除" type="danger" class="delete-button" @click="del(index)"/>
    </template> 
   </van-swipe-cell>
   </div>
  </div>
  <!-- 空狀態(tài) 沒數(shù)據(jù)顯示 有數(shù)據(jù)隱藏-->
  <van-empty
   v-show="$store.state.cartList.length==0"
   class="custom-image"
   image="https://img.yzcdn.cn/vant/custom-empty-image.png"
   description="購(gòu)物車是空的喲！"
  />
  <!--  商品導(dǎo)航-->
  <van-submit-bar :price="$store.getters.total*100" button-text="提交訂單">
   <van-checkbox v-model="checkAll">全選</van-checkbox>
  </van-submit-bar>

 </div>
</template>

<script>
 import {mapMutations} from 'vuex'
 export default {
  data() {
   return {
   list: this.$store.state.cartList, //購(gòu)物車數(shù)據(jù)
   }
  },
  computed: {
   // 計(jì)算屬性checkAll 和全選按鈕雙向數(shù)據(jù)綁定，別人可以控制它 它也可以控制別人
   // 別人控制它 給他一個(gè)值的時(shí)候是 get , 它控制別人 給別人設(shè)置值的時(shí)候 是set
   // 在set中newVal參數(shù)是這個(gè)計(jì)算屬性改變后的值
   checkAll: { //可以看作一個(gè)事件
   get() {
    // 判斷購(gòu)物車?yán)锷唐返拈L(zhǎng)度為0 return false
    if (this.list.length == 0) {
     return false
    }
    return this.$store.state.cartList.every(item => {
     return item.ckd == true // 返回結(jié)果復(fù)選框?yàn)閠rue
    })
   },
   set(newVal) {
    this.$store.commit('ckd', newVal)
   },
   }
  },
  methods: {
   // 返回商品列表頁(yè)
   back() {
   this.$router.push({
    path: '/'
   })
   },
   //方法集合
   ...mapMutations(['del', 'changeNum',])
  },
 }
</script>

<style lang="scss" scoped>
 .goods-card {
  margin: 0;
  background-color: white;
 }
 .delete-button {
  height: 100%;
 }
 .car-box {
  width: 100%;
  margin-bottom: 5px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  .car-box-left {
   flex: 1;
   padding-left: 10px;
  }
  .car-box-right {
   flex: 12;
  }
 }
</style>

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
  cartList: [], // 購(gòu)物車數(shù)據(jù)
 },
 mutations: {
  // 添加商品
  add(state, item) {
   // console.log(item)
   let flag = false;
   // 加購(gòu)去重（通過id判斷）
   state.cartList.forEach(i => {
   if (i.item.id == item.id) {
    i.num++;
    flag = true;
   }
   })
   if (flag == false) {
   state.cartList.push({
    num: 1, // 添加數(shù)量默認(rèn)為1
    item, // 添加購(gòu)物車商品數(shù)據(jù)
    ckd: false, // 添加復(fù)選框初始化狀態(tài)為false
   })
   }
   // console.log(state.cartList)
  },
  // 刪除商品
  del(state, index) {
   state.cartList.splice(index, 1)
   // state.
  },
  // 改變數(shù)量------加減綜合法 ?。。?
  changeNum(state, index) {
   state.cartList.num = index
  },
  // 全選全不選
  ckd(state, newAll) {
   state.cartList.forEach(item => {
   item.ckd = newAll
   })
  }

 },
 // 計(jì)算 getters
 getters: {
  // 總價(jià)
  total(state) {
   let sum = 0;
   state.cartList.forEach(item => {
   // 如果復(fù)選框選中 計(jì)算總價(jià)
   if (item.ckd == true) {
    sum += item.item.actualPrice * item.num
   }
   })
   return sum
  }
 },
 actions: {},
 modules: {},
 // Vuex存儲(chǔ)插件
 plugins: [
  new VuexPersist({
   storage: window.localStorage,
  }).plugin,
 ]
})