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

頁面佈局：

採用了element-ui的表格對商品列表和購物車列表進行佈局

1、商品列表

<template>
 <div class="shop-list">
 <table>
 <el-table :data="shopList" style="width: 100%">
 <el-table-column label="id" width="180">
 <template slot-scope="scope">
 <i class="el-icon-time"></i>
 <span style="margin-left: 10px">{{ scope.row.id }}</span>
 </template>
 </el-table-column>
 <el-table-column label="名稱" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.name }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.name }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="價格" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.price }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.price }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="操作">
 <template slot-scope="scope">
 <el-button size="mini" @click="add(scope.row)">新增</el-button>
 </template>
 </el-table-column>
 </el-table>
 </table>
 </div>
</template>

shopList資料：

//模擬商品列表資料
 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
 }],

購物車列表

因為我們還沒新增商品，所以購物車為空

現在用vuex編寫功能函式

在store.js中

在state中：定義兩個變數，分別是商品列表，購物車列表，購物車開始為空

在getters中

有四個計算變數，分別是商品列表，購物車列表、購物車商品總數量和總價格的實時更新

在mutations中：

addCart：如果商品已經新增過了就無須新增，只對其數量增加

在actions中：

完整程式碼

shop-list.vue頁面

<template>
 <div class="shop-list">
 <table>
 <el-table :data="shopList" style="width: 100%">
 <el-table-column label="id" width="180">
 <template slot-scope="scope">
 <i class="el-icon-time"></i>
 <span style="margin-left: 10px">{{ scope.row.id }}</span>
 </template>
 </el-table-column>
 <el-table-column label="名稱" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.name }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.name }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="價格" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.price }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.price }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="操作">
 <template slot-scope="scope">
 <el-button size="mini" @click="add(scope.row)">新增</el-button>
 </template>
 </el-table-column>
 </el-table>
 </table>
 </div>
</template>
<script>
import{mapActions} from "vuex";
export default {
 data() {
 return {
 
 };
 },computed:{
 shopList(){
 return this.$store.getters.getShopList
 }
 },methods: {
 add(row){
 this.$store.dispatch('addToCart',{id:row.id,name:row.name,price:row.price})
 },}
};
</script>
<style lang="less" scoped>
.shop-list {
 width: 500px;
}
</style>

shop-cart.vue頁面

<template>
 <div class="shop-list">
 <table>
 <el-table :data="cartData" style="width: 100%">
 <el-table-column label="id" width="180">
 <template slot-scope="scope">
 <i class="el-icon-time"></i>
 <span style="margin-left: 10px">{{ scope.row.id }}</span>
 </template>
 </el-table-column>
 <el-table-column label="名稱" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.name }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.name }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="價格" width="180">
 <template slot-scope="scope">
 <el-popover trigger="hover" placement="top">
 <p>{{ scope.row.price }}</p>
 <div slot="reference" class="name-wrapper">
 <el-tag size="medium">{{ scope.row.price }}</el-tag>
 </div>
 </el-popover>
 </template>
 </el-table-column>
 <el-table-column label="數量" width="180">
 <template slot-scope="scope">
 <el-button size="mini" @click="reduceNum(scope.row)" :disabled="scope.row.num == 1">-</el-button>
 <span id="num">{{scope.row.num}}</span>
 <el-button size="mini" @click="addNum(scope.row)">+</el-button>
 </template>
 </el-table-column>
 <el-table-column label="操作">
 <template slot-scope="scope">
 <el-button size="mini" @click="del(scope.$index,scope.row)">刪除</el-button>
 </template>
 </el-table-column>
 </el-table>
 </table>
 <div class="total">
 <span>總數量{{totalNum}}</span>
 <span>總價格{{totalPrice}}</span>
 <el-button type="danger" @click="clearCart">清空購物車</el-button>
 </div>
 </div>
</template>
<script>
 import {mapGetters,mapActions} from "vuex";
export default {
 data() {
 return {
 shop_list: [
 {
 id: 11,name: "魚香肉絲",price: 12
 },name: "宮保雞丁",name: "土豆絲",name: "米飯",name: "螞蟻上樹",name: "臘肉炒蒜薹",price: 15
 }
 ]
 };
 },computed:{
 ...mapGetters({
 cartData:'addShopList',totalNum:'totalNum',totalPrice:'totalPrice'
 })
 },methods: {
 clearCart() {
 this.$store.dispatch('clearToCart')
 },addNum(row){
 this.$store.dispatch('addNum',{id:row.id})
 },reduceNum(row){
 this.$store.dispatch('reduceNum',del(index,row){
 this.$store.dispatch('delToShop',{id:row.id})
 }
 }
};
</script>
<style lang="less" scoped>
.shop-list {
 width: 500px;
 margin-top: 20px
}
#num{
 margin: 0 10px
}
.total{
 margin-top: 30px;
 text-align: center;
 span{
 margin-right: 20px
 }
}
</style>

App.vue

<template>
 <div class="home">
 <shop-list/>
 <shop-cart/>
 </div>
</template>

<script>
// @ is an alias to /src
import shopList from '../components/shop-list.vue'
import shopCart from '../components/shop-cart.vue'
export default {
 name: 'home',components: {
 shopList,shopCart
 },data(){
 return{
 val:''
 }
 },methods:{
 parent(childValue){
 // console.log(childValue)
 // this.val = childValue;
 this.val = childValue
 },handle(){
 console.log('gg')
 }
 }
}
</script>

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

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