基于vuex实现购物车功能
作者:栋栋很优秀啊 时间:2024-05-08 10:43:35
本文实例为大家分享了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: {}
})
来源:https://blog.csdn.net/dongdongaa0/article/details/111304266
标签:vuex,购物车
0
投稿
猜你喜欢
Python 数据可视化超详细讲解折线图的实现
2023-06-06 14:49:18
Vue.js实现一个自定义分页组件vue-paginaiton
2024-05-02 16:36:36
win10下opencv-python特定版本手动安装与pip自动安装教程
2022-09-29 14:03:02
ORACLE正则匹配查询LIKE查询多个值检索数据库对象
2024-01-20 18:11:01
微信小程序实现上传视频功能
2023-08-24 16:18:42
JavaScript中的eval()函数详解
2024-04-19 09:59:53
Pytorch通过保存为ONNX模型转TensorRT5的实现
2023-10-22 13:45:27
pycharm配置Qt Designer工具的图文教程
2021-02-10 05:56:40
python猜数字小游戏实现代码
2022-04-20 19:01:43
Python数据处理之pd.Series()函数的基本使用
2022-09-29 08:50:21
python神经网络使用tensorflow构建长短时记忆LSTM
2021-10-13 19:23:39
如何修改Editplus让图片自适应界面大小
2007-09-26 12:37:00
python基础pandas的drop()用法示例详解
2023-06-11 15:11:39
ASP日期格式化函数
2010-08-08 19:18:00
Python编程pygal绘图实例之XY线
2021-02-17 10:42:10
解决Python print输出不换行没空格的问题
2021-03-21 11:05:57
Ubuntu18.04安装mysql5.7.23的教程
2024-01-19 21:20:03
python爬虫框架scrapy下载中间件的编写方法
2021-10-16 13:37:19
JavaScript也谈内存优化
2024-02-25 16:33:17
python 爬取吉首大学网站成绩单
2023-08-02 05:57:13