Vuex实现购物车功能
话不多说,先看效果:
购物车初始效果:
反选:
单选:
自定义购买数量,价格自动更改:
删除选中商品功能:
核心代码演示:
import { Toast } from 'vant'
import { Dialog } from 'vant'
var state = {
//购物车,涉及到刷新数据丢失,存在本地
car: localStorage["car"] ? JSON.parse(localStorage["car"]) : [],
//总价
all_money:0,
//全选状态
all_select:true
}
var getters = {
//购物车列表
carList(state) {
//初始化全选状态
if(state.all_select) {
state.car.forEach((item) => {
item.selected = true
})
}
//列表变化存本地
localStorage.setItem("car",JSON.stringify(state.car));
return state.car
},
//选中商品的金额
allMoney(state) {
let notSelect = 0;
let all_money = 0;
state.car.forEach((item) => {
if(item.selected) {
all_money += item.num * item.price
}else{
notSelect++
}
})
if (all_money < 50.00 && notSelect != state.car.length) {
all_money = all_money + 9;
} else if (notSelect == state.car.length) {
all_money = 0.00;
}
return state.all_money = all_money
},
//全选
allSelect(state) {
let allSelectNum = 0;
state.car.forEach((item) => {
if(item.selected == true) {
allSelectNum ++
}else{
state.all_select = false
}
})
if (allSelectNum == state.car.length) {
state.all_select = true
}
return state.all_select
},
selectNum(state) {
let currentSelectNum = 0;
state.car.forEach((item) => {
if(item.selected == true) {
currentSelectNum ++
}
})
return currentSelectNum
}
}
var mutations = {
//添加商品
sm_addGoods(state, data) {
//传入商品属性
let datas = {
title: data.title,
img: data.image,
num:data.num,
price: data.price,
originalPrice: data.originalPrice,
selected: data.selected,
productId: data.id
}
let index = -1
//返回元素的索引位置,如果没有符合条件的元素返回-1
index = state.car.findIndex(item => {
return item.productId == data.id
})
//返回-1说明购物车里没有这个商品,则push进去,如果返回下标,则让该商品数量加1
if(index == -1){
state.car.push(datas);
}else{
state.car[index].num = state.car[index].num + datas.num
}
Toast("已加入购物车!");
},
//购物车页面数量加减
sm_addNum(state,productId) {
let index = state.car.findIndex(item => {
return item.productId == productId
})
return state.car[index].num++
},
//购物车页面数量加减
sm_deleteNum(state,productId) {
let index = state.car.findIndex(item => {
return item.productId == productId
})
if(state.car[index].num <= 1) {
return state.car[index].num = 1
}else{
return state.car[index].num --
}
},
//购物车单选
sm_select(state,productId) {
let index = state.car.findIndex(item => {
return item.productId == productId
})
state.car[index].selected = !state.car[index].selected
let flag = state.car.some((item) => {
return item.selected == false
})
//如果全部选中、则全选状态也改变
if(!flag) {
state.all_select = true
}else{
state.all_select = false
}
},
//购物车全选
sm_selectAll(state) {
state.all_select = !state.all_select
if(state.all_select) {
state.car.forEach((item) => {
item.selected = true
})
}else{
state.car.forEach((item) => {
item.selected = false
})
}
},
//删除选中的商品,注意这里不能使用数据删除的方法,索引值会有问题
sm_del(state) {
let flag = state.car.some((item) => {
return item.selected == true
})
if(!flag) {
Toast("请至少选择一个商品")
}else{
Dialog.confirm({
title: '删除商品',
message: '您确定删除商品吗?(勾选都会被删除)',
})
.then(() => {
var list = [];
state.car.forEach((item,index) => {
if(!item.selected) {
list.push(item)
}
})
return state.car = list
})
.catch(() => {
// on cancel
});
}
}
}
var actions = {
//异步触发mutations里面的方法,在外部组件里进行全局执行actions里面的方法的时候,只需this.$store.dispatch()
sa_addGoods({commit},data) {
commit('sm_addGoods',data)
},
sa_addNum({commit}, id) {
commit('sm_addNum',id)
},
sa_deleteNum({commit}, id) {
commit('sm_deleteNum', id)
},
sa_select({commit}, id) {
commit('sm_select', id)
},
sa_selectAll({commit}) {
commit('sm_selectAll')
},
sa_del({commit}) {
commit('sm_del')
}
}
export default {
state, mutations, actions,getters
}