本文例項為大家分享了x實現購物車功能的具體程式碼，供大家參考，具體內容如下

檔案目錄如下：

購物車元件

<template>
    <div>
        <h1>vuex-shopCart</h1>
        <div class="shop-listbox">
            <shop-list />
   http://www.cppcns.com     </div>
        <h2>已選商品</h2>
        <div class="shop-cartbox">
            <shop-cart />
        </div>
    </div>
</template>

<script>
import shoList from './shop-list'
import shopCart from './shop-cart'

export default {
  name: 'shop',components: {
      'shop-list' : shoList,'shop-cart' : shopCart
  }
}
</script>

<!-- Add "scoped" attribute to limit  to this component only -->
<style scoped>
</styl
 
e>

商品列表

<template>
    <div class="shop-list">
        <table>
            <tr class="shop-listtitle">
                <td>id</td>
                <td>名稱</td>
                <td>價格</td>
                <td>操作</td>
            </tr>
            <tr v-for = "item in shopList" class="客棧
 
shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="addToCart(item)">加入購物車</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import {mapGetters,mapActions} from "vuex";
export default {
    name : 'shopList',computed: {
        ...mapGetters({
                shopList:'getShopList',})
    },methods: {
        ...mapActions(['addToCart'])
    },}
</script>

選中商品列表

<template>
    <div class="shop-list">
        <table>
            <tr class="shop-listtitle">
                <td>id</td>
                <td>名稱</td>
                <td>價格</td>
      程式設計客棧          <td>數量</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in cartData" class="shop-listinfo" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
                <td><button class="shop-dele dele-btn" @click="deleteShop(item)">刪除</button></td>
            </tr>
            <tr v-if="cartData.length <= 0">
                <td colspan="5">暫無資料</td>
            </tr>
            <tr>
                <td colspan="2">總數:{{totalNum}}</td>
                <td colspan="2">總價格:{{totalPrice}}</td>
                <td><button class="dele-cart dele-btn" @click="clearCart">清空購物車</button></td>
            </tr>
        </table>
    </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
    name : 'shopCart',data(){
        return{
            
        }
    },computed: {
        ...mapGetters({
            cartData:'addShopList',totalNum : 'totalNum',totalPrice:'totalPrice'
        })
    },methods: {
        ...mapActions({
            clearCart:'clearToCart',deleteShop:"deletToShop"
        })
    }
}
</script>

vuex 建立

npm install vuex --save,建立vuex資料夾，在資料夾中建立store.，引入vuex；

store.js

import Vue from "vue"
import Vuex from 'vuex'
import cart from './modules/cart'

Vue.use(Vuex)

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

建立一個模組資料夾modules，裡面建立建立當個store模組，然後預設輸出，在store.js中引入；

cart.js

const state = {
    shop_list: [{
        id: 11,name: '魚香肉絲',price : 12
    },{
            id: 22,name: '宮保雞丁',price : 14
        },{
            id: 34,name: '土豆絲',price : 10
        },{
            id: 47,name: '米飯',price : 2
        },{
            id: 49,name: '螞蟻上數',price : 13
        },{
            id: 50,name: '臘肉炒蒜薹',price : 15
        }],add : []
}

const getters = {
    // 獲取商品列表
    getShopList: state => state.shop_list,// 獲取購物車列表
    addShopList: state => {
        // map()方法返回一個新陣列，陣列中的元素為原始陣列元素呼叫函式處理後的值
        return state.add.map(({ id,num }) => {
            let product = state.shop_list.find(n => n.id == id)// find()方法返回通過測試(函式內判斷)的陣列的第一個元素的值，如果沒有符合條件的元素返回undefined
            if (product) {//    如果存在該商品
                return {//  返回物件
                    ...product,num
                }
            }
        })
    },// 獲取總數量
     totalNum: (state,gehttp://www.cppcns.comtters) => {
         let total = 0
         getters.addShopList.map(n => { 
             total += n.num
         })
         return total
    },// 計算總價格
    totalPrice: (state,getters) => { 
        let total = 0
        getters.addShopList.map(n => { 
            total += n.num * n.price
        })
        return total
    }
},const actions = {
    // 加入購物車
    addToCart({ commit},product) { 
        commit('addCart',{
            id : product.id
        })
    },// 清空購物車
    clearToCart({ commit}) { 
        commit('clearCart')
    },// 刪除單個物品
    deletToShop({ commit},product) { 
        commit('deletShop',product)
    }
}

const mutations = {
    // 加入購物車
    addCart(state,{ id}){ 
        let record = state.add.find(n => n.id == id)
        if (!record) {//   如果購物車中不存在該商品
            state.add.push({//  追加商品
                id,num : 1
            })
        } else { // 如果商品已經加入購物車，則改變數量
            record.num++
        }
    },// 刪除單個物品
    deletShop(state,product) { 
        state.add.forEach((item,i) => { 
            if (item.id == product.id) {//  如果找到該商品 
                state.add.splice(i,1)
            }
        })
    },// 清空購物車
    clearCart(state) { 
        state.add = []
    }
}

export default {
    state,getters,actions,mutations
}

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