vuex实现的简单购物车功能示例
程序员文章站
2022-12-28 17:13:18
本文实例讲述了vuex实现的简单购物车功能。分享给大家供大家参考，具体如下：
购物车组件
...
本文实例讲述了vuex实现的简单购物车功能。分享给大家供大家参考，具体如下：
购物车组件
<template>
<div>
<h1>vuex-shopcart</h1>
<div class="shop-listbox">
<shop-list/>
</div>
<h2>已选商品</h2>
<div class="shop-cartbox">
<shop-cart/>
</div>
</div>
</template>
<script>
import shoplist from "./shop-list";
import shopcart from './shop-cart';
export default{
name:'shop',
components:{
'shop-list':shoplist,
'shop-cart':shopcart
}
}
</script>
商品列表
<template>
<div class="shop-list">
<table>
<tr class="shop-listtitle">
<td>id</td>
<td>名称</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr v-for="item in shoplist" class="shop-listinfo">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><button @click="addtocart(item)">加入购物车</button></td>
</tr>
</table>
</div>
</template>
<script>
import{mapactions} from "vuex";
export default{
name:'shoplist',
data(){
return{
}
},
computed:{
shoplist(){
return this.$store.getters.getshoplist
}
},
methods:{
...mapactions(['addtocart'])
}
}
</script>
<style lang="less" scoped>
@import url('../../static/public.less');
</style>
选中商品列表
<template>
<div class="shop-list">
<table>
<tr class="shop-listtitle">
<td>id</td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr v-for="item in cartdata" class="shop-listinfo">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td><button class="shop-dele dele-btn" @click="deletshop(item)">删除</button></td>
</tr>
<tr v-if="cartdata.length<=0">
<td colspan="5">暂无数据</td>
</tr>
<tr>
<td colspan="2">总数：{{totalnum}}</td>
<td colspan="2">总价格：{{totalprice}}</td>
<td><button class="dele-cart dele-btn" @click="clearcart">清空购物车</button></td>
</tr>
</table>
</div>
</template>
<script>
import {mapgetters,mapactions} from "vuex";
export default{
name:'shopcart',
data(){
return{
}
},
computed:{
...mapgetters({
cartdata:'addshoplist',
totalnum:'totalnum',
totalprice:'totalprice'
})
},
methods:{
...mapactions({
clearcart:'cleartocart',
deletshop:'delettoshop'
})
}
}
</script>
<style lang="less" scoped>
@import url('../../static/public.less');
.dele-btn{
background-color: red !important;
}
.dele-btn:hover{
background-color: #bd0000 !important;
}
</style>
vuex 创建
npm install vuex --save,创建vuex文件夹，在文件夹中创建store.js，引入vuex；
import vue from "vue";
import vuex from 'vuex';
import cart from "./modules/cart";
vue.use(vuex);
export default new vuex.store({
modules:{
cart
}
})
建立一个模块文件夹modules，里面创建创建当个store模块，然后默认输出，在store.js中引入；
const state = {
shop_list: [{
id: 11,
name: '鱼香肉丝',
price: 12,
}, {
id: 22,
name: '宫保鸡丁',
price: 14
}, {
id: 34,
name: '土豆丝',
price: 10
}, {
id: 47,
name: '米饭',
price: 2
},{
id: 49,
name: '蚂蚁上树',
price: 13
},
{
id: 50,
name: '腊肉炒蒜薹',
price: 15
}],
add:[]
}
const getters ={
//获取商品列表
getshoplist:state => state.shop_list,
//获取购物车列表
addshoplist:state => {
return state.add.map(({id,num})=>{
let product = state.shop_list.find(n => n.id == id);
if(product){
return{
...product,
num
}
}
})
},
//获取总数量
totalnum:(state,getters) =>{
let total =0;
getters.addshoplist.map(n=>{
total += n.num;
})
return total;
},
//计算总价格
totalprice:(state,getters)=>{
let total=0;
getters.addshoplist.map(n=>{
total += n.num*n.price
})
return total;
},
}
const actions={
//加入购物车
addtocart({commit},product){
commit('addcart',{
id:product.id
})
},
//清空购物车
cleartocart({commit}){
commit('clearcart')
},
//删除单个物品
delettoshop({commit},product){
commit('deletshop',product)
}
}
const mutations ={
//加入购物车
addcart(state,{id}){
let record = state.add.find(n => n.id == id);
if(!record){
state.add.push({
id,
num:1
})
}else{
record.num++;
}
},
//删除单个物品
deletshop(state,product){
state.add.foreach((item,i)=>{
if(item.id == product.id){
state.add.splice(i,1)
}
})
},
//清空购物车
clearcart(state){
state.add=[];
}
}
export default{
state,
getters,
actions,
mutations
}
希望本文所述对大家vue.js程序设计有所帮助。
上一篇： vue双向数据绑定原理探究(附demo)
下一篇： MS522低功耗寻卡