使用vuex怎么实现一个购物车功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
代码:
<template>
<div class="Home">
<h2>vuex购物车案例</h2>
<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;
}
h2{
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: {}
})
关于使用vuex怎么实现一个购物车功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。