vuex實(shí)現(xiàn)購(gòu)物車功能

更新時(shí)間：2020年06月28日 10:14:43 作者：Jeslie-He

這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vuex實(shí)現(xiàn)購(gòu)物車功能的具體代碼，供大家參考，具體內(nèi)容如下

頁(yè)面布局：

采用了element-ui的表格對(duì)商品列表和購(gòu)物車列表進(jìn)行布局

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="價(jià)格" 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數(shù)據(jù)：

//模擬商品列表數(shù)據(jù)
 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: '螞蟻上樹(shù)',
 price: 13
 },
 {
 id: 50,
 name: '臘肉炒蒜薹',
 price: 15
 }],

購(gòu)物車列表

因?yàn)槲覀冞€沒(méi)添加商品，所以購(gòu)物車為空

現(xiàn)在用vuex編寫功能函數(shù)

在store.js中

在state中：定義兩個(gè)變量，分別是商品列表，購(gòu)物車列表，購(gòu)物車開(kāi)始為空

在getters中

有四個(gè)計(jì)算變量，分別是商品列表，購(gòu)物車列表、購(gòu)物車商品總數(shù)量和總價(jià)格的實(shí)時(shí)更新

在mutations中：

addCart：如果商品已經(jīng)添加過(guò)了就無(wú)須添加，只對(duì)其數(shù)量增加

在actions中：

完整代碼

shop-list.vue頁(yè)面

<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="價(jià)格" 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頁(yè)面

<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="價(jià)格" 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="數(shù)量" 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>總數(shù)量{{totalNum}}</span>
 <span>總價(jià)格{{totalPrice}}</span>
 <el-button type="danger" @click="clearCart">清空購(gòu)物車</el-button>
 </div>
 </div>
</template>
<script>
 import {mapGetters,mapActions} from "vuex";
export default {
 data() {
 return {
 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: "螞蟻上樹(shù)",
 price: 13
 },
 {
 id: 50,
 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',{id:row.id})
 },
 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>

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: