vuex實(shí)現(xiàn)購(gòu)物車功能
本文實(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: '螞蟻上樹', 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)物車開始為空
在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: "螞蟻上樹", 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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁(yè)面,前面加默認(rèn)域名端口的問(wèn)題
這篇文章主要介紹了解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁(yè)面,前面加默認(rèn)域名端口的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07Vue如何循環(huán)提取對(duì)象數(shù)組中的值
這篇文章主要介紹了Vue如何循環(huán)提取對(duì)象數(shù)組中的值,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例
下面小編就為大家?guī)?lái)一篇使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細(xì)過(guò)程
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細(xì)過(guò)程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件步驟解析
今天給大家介紹一款基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件,這個(gè)時(shí)鐘倒計(jì)時(shí)組件采用canvas動(dòng)畫的炫酷動(dòng)畫效果形式,根據(jù)剩余時(shí)間的多少變換顏色和旋轉(zhuǎn)扇形的速度,適合搶購(gòu)、拍賣、下注等業(yè)務(wù)場(chǎng)景,且對(duì)移動(dòng)端友好,需要的朋友可以參考下2018-11-11Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem)
這篇文章主要介紹了Vue CLI3移動(dòng)端適配(px2rem或postcss-plugin-px2rem),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04vue中多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式
這篇文章主要介紹了vue項(xiàng)目多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04