【Vue基础】Vuex实现购物车功能

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
}