vuex实现的简单购物车功能示例
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了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程序设计有所帮助。