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

最新推荐文章于 2025-05-02 20:46:08 发布

Milk595

最新推荐文章于 2025-05-02 20:46:08 发布

阅读量1k

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43352901/article/details/107573571

版权

本文详细介绍了如何利用Vuex在Vue应用中实现购物车功能，包括商品的添加、删除、数量调整及选中状态管理。通过实例展示了关键代码，帮助读者理解Vuex在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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++
            }
        })

最低0.47元/天解锁文章