基于vuex实现购物车功能

作者:栋栋很优秀啊 时间:2024-05-08 10:43:35 

本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下

先看效果:

基于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
  • asp之家 网络编程 m.aspxhome.com