Vuex實現購物車功能（附：效果視訊），供大家參考，具體內容如下

功能描述：

• 加購
• 刪除
• 加減
• 全選反選
• 選中計算總價
• 儲存
  

整體演示效果如下：

首先介紹一下Vuex：

Vuex 例項物件屬性 主要有下面5個核心屬性:

state : 全域性訪問的state物件，存放要設定的初始狀態名及值（必須要有）

mutations : 裡面可以存放改變 state 的初始值的方法 ( 同步操作–必須要有 )

getters: 實時監聽state值的變化可對狀態進行處理，返回一個新的狀態，相當於store的計算屬性（不是必須的）

actions : 裡面可以存放用來非同步觸發 mutations 裡面的方法的方法 ( 非同步操作–不是必須的 )

modules : 存放模組化的資料（不是必須的）

一、主頁面Home：

<template>
 <div id="app">
  <div class="nav-top">
   <!--  標籤欄-->
   <van-nav-bar
    title="商品列表頁"
    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: [],// 商品列表資料
   }
  },// 請求商品列表資料
  mounted() {
  // 介面不予展示，有需要請自行下載
   this.$axios.get('api介面').then(res => {
   this.goodsList = res.data.data.data
   // console.log(this.goodsList)
   })
  },methods: {
   // 新增商品 呼叫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>

二、購物車頁面ShopCart：

<template>
 <div>
  <!--  標籤欄-->
  <van-nav-bar
   title="購物車"
   left-arrow
   @click-left="back"
  />
  <!--  購物車box -->
  <div class="car-box" v-for="(item,index) in list" :key="index">
   <!-- 左側複選框佈局-->
   <div class="car-box-left">
   <van-checkbox v-model="item.ckd"></van-checkbox>
   </div>
   <!-- 右側商品卡片佈局-->
   <div class="car-box-right">
   <van-swipe-cell>
    <van-card
      :price="item.item.actualPrice"
      :title="item.item.dtitle"
      :thumb="item.item.mainPic"
    >
     <!-- 步進器-->
     <template #num>
      <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
         @change="changeNum(item.num)"/>
     </template>
    </van-card>
    <!--  右側滑動刪除-->
    <template #right>
     <van-button square text="刪除" type="danger" class="delete-button" @click="del(index)"/>
    </template> 
   </van-swipe-cell>
   </div>
  </div>
  <!-- 空狀態 沒資料顯示 有資料隱藏-->
  <van-empty
   v-show="$store.state.cartList.length==0"
   class="custom-image"
   image="https://img.yzcdn.cn/vant/custom-empty-image.png"
   description="購物車是空的喲！"
  />
  <!--  商品導航-->
  <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,//購物車資料
   }
  },computed: {
   // 計算屬性checkAll 和全選按鈕雙向資料繫結，別人可以控制它 它也可以控制別人
   // 別人控制它 給他一個值的時候是 get,它控制別人 給別人設定值的時候 是set
   // 在set中newVal引數是這個計算屬性改變後的值
   checkAll: { //可以看作一個事件
   get() {
    // 判斷購物車裡商品的長度為0 return false
    if (this.list.length == 0) {
     return false
    }
    return this.$store.state.cartList.every(item => {
     return item.ckd == true // 返回結果複選框為true
    })
   },set(newVal) {
    this.$store.commit('ckd',newVal)
   },}
  },methods: {
   // 返回商品列表頁
   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>

三、Vuex程式碼：

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

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
  cartList: [],// 購物車資料
 },mutations: {
  // 新增商品
  add(state,item) {
   // console.log(item)
   let flag = false;
   // 加購去重（通過id判斷）
   state.cartList.forEach(i => {
   if (i.item.id == item.id) {
    i.num++;
    flag = true;
   }
   })
   if (flag == false) {
   state.cartList.push({
    num: 1,// 新增數量預設為1
    item,// 新增購物車商品資料
    ckd: false,// 新增複選框初始化狀態為false
   })
   }
   // console.log(state.cartList)
  },// 刪除商品
  del(state,index) {
   state.cartList.splice(index,1)
   // state.
  },// 改變數量------加減綜合法 ！！！
  changeNum(state,index) {
   state.cartList.num = index
  },// 全選全不選
  ckd(state,newAll) {
   state.cartList.forEach(item => {
   item.ckd = newAll
   })
  }

 },// 計算 getters
 getters: {
  // 總價
  total(state) {
   let sum = 0;
   state.cartList.forEach(item => {
   // 如果複選框選中 計算總價
   if (item.ckd == true) {
    sum += item.item.actualPrice * item.num
   }
   })
   return sum
  }
 },actions: {},modules: {},// Vuex儲存外掛
 plugins: [
  new VuexPersist({
   storage: window.localStorage,}).plugin,]
})

關於vue.js元件的教程，請大家點選專題vue.js元件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。