站长资源网络编程
基于vuex实现购物车功能
简介本文实例为大家分享了vuex实现购物车功能的具体代码，供大家参考，具体内容如下先看效果:代码：
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: {}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。