本文实例为大家分享了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 }, { 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>
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7