快活林资源网 Design By www.csstdc.com
本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下
先看效果:
代码:
<template> <div class="Home"> <h1>vuex购物车案例</h1> <add-from></add-from> <shop-cart></shop-cart> </div> </template> <script> import AddFrom from './Add.vue' import ShopCart from './ShopCart.vue' // @ is an alias to /src // import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { AddFrom, ShopCart }, }; </script> <style> table { width: 800px; margin: 0 auto; border: 1px solid #ccc; border-spacing: 0; } tbody th, tbody td { border: 1px solid #ccc; text-align: center; } h1{ text-align: center; } .add{ width: 800px; margin: 0 auto; } </style>
父组件
<template> <div class="add"> <div class="from-group"> <label for="">商品编号</label> <input type="text" v-model="shop.id" placeholder="请输入商品编号"> </div> <div class="from-group"> <label for="">商品名称</label> <input type="text" v-model="shop.name" placeholder="请输入商品名称"> </div> <div class="from-group"> <label for="">商品价格</label> <input type="text" v-model="shop.price" placeholder="请输入商品价格"> </div> <div class="from-group"> <label for="">商品数量</label> <input type="text" v-model="shop.count" placeholder="请输入商品数量"> </div> <div class="from-group"> <button @click="add">添加商品</button> </div> </div> </template> <script> export default { name: 'add', data() { return { shop:{} }; }, methods:{ add(){ this.$store.dispatch("addShopList",this.shop) this.shop = { id:"", name:"", price:"", count:"" } } } }; </script> <style scoped> .add{ width: 800px; text-align: center; } </style>
```bash
<template> <div class="Shop-Cart"> <table> <thead border> <tr> <th>商品编号</th> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody v-if="shop.length > 0"> <tr v-for="(i, e) in shop" :key="e"> <td>{{ i.id }}</td> <td>{{ i.name }}</td> <td>{{ i.price }}</td> <td> <button @click="add(e)">+</button> <input type="text" v-model="i.count" /> <button @click="delet(e)">-</button> </td> <td>¥{{ i.price * i.count }}</td> <td><button @click="del(e)">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="6" align="right">总计:{{ total }}</td> <button @click="clear">清除购物车</button> </tr> </tfoot> </table> </div> </template> <script> export default { name: 'Shop-Cart', components: {}, data() { return {}; }, computed: { shop() { return this.$store.getters.getlist; }, total() { return this.$store.getters.getShopTotal; } }, methods: { del(e) { // this.$store.dispatch() this.$store.dispatch('remoteList', e); }, add(e) { this.$store.dispatch('addList', e); }, delet(e) { this.$store.dispatch('deleteList', e); }, clear() { this.$store.dispatch('clearList', []); } } }; </script>
vuex组件
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { list: [{ id: 1, name: "哇哈哈", price: 3, count: 0 }, { id: 2, name: "哇哈", price: 3, count: 0 } ] }, getters: { //获取购物车数据 getlist(state) { return state.list }, //商品的总价 getShopTotal(state,index) { let result = 0; state.list.forEach((item, index) => { result += item.price * item.count }) return result }, }, mutations: { //删除购物车单个数据 remoteList(state,index) { state.list.splice(index, 1); console.log("aaa",state) }, //商品数量增加 addList(state, index) { state.list[index].count++; }, //商品数量减少 deleteList(state, index) { state.list[index].count--; if(state.list[index].count<=0){ state.list[index].count = 0 return ; } }, //清除购物车 clearList(state, arr) { state.list = arr }, addShopList(state,shop){ state.list.push(shop) } }, //使用actions调用mutations方法 actions: { remoteList({ commit }, index) { commit("remoteList", index) }, addList({ commit }, index) { commit("addList", index) }, deleteList({ commit }, index) { commit("deleteList", index) }, clearList({ commit }, arr) { commit("clearList", arr) }, addShopList({commit},shop){ commit("addShopList",shop) } }, modules: {} })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年05月17日
2024年05月17日
- 【驰放沙发(J)】VA-2024-WinterTime,Vol.12(FLAC)
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 韩红《青藏高原+红+韩红精选集》3CD[WAV分轨][1.7G]
- 高胜美《经典金选》1991-1994 4CD[WAV整轨][1.9G]
- 【迷幻电音】AstralWaves-2023-Singles,RemixesandRaritiesII(FLAC)
- 中唱唱片群星《好歌珍藏-游子情深》2CDWAV
- 张国荣.2011-极品天碟LPCD45II(雨果版)【环球】【WAV+CUE】
- 张学友《醒着做梦》[DFF][1.1G]
- 刘惜君 《如我》[WAV分轨][403M]
- 白玛多吉《梦》限量1:1母盘直刻[低速原抓WAV+CUE][508M]
- 魏金栋-金歌新曲-梦里全是桂花香2CD[天凡之音][WAV+CUE]
- 鲛岛有美子-樱花赋HQCD[天龙][WAV+CUE]
- [In-Akustik7506]ReferenceSoundEdition-GreatWomenOfSong(2014)HQCD[WAV+CUE]
- 日本EMI超级名盘TOGE-11035-36BeethovenFidelio-Furtwngler
- 宝丽金50周年2010《古典篇》3CD限定盘[低速原抓WAV+CUE]