【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<