基于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