0、场景描述

写项目的过程中没有加入购物车的接口，通过将点击加购的商品数据存到本地缓存中，后续需要购物车数据时直接使用本地缓存中的数据解决。

本文主要描述如何将商品添加到本地缓存中，解决了的问题有：

1、将商品a添加到本地缓存；

2、如果原来本地缓存中有商品a，则为a添加属性num，让num+1，不再重复添加商品a的数据；

3、加购商品b时，会将原来购物车中的a商品顶替掉，通过先将原来购物车中已有的数据拿出并解构，再加上现在要加入的b商品的数据，一起添加到本地缓存中解决该问题

1、组件：vant3

import { createApp } from 'vue';
import { ActionBar, ActionBarIcon, ActionBarButton } from 'vant';

const app = createApp();
app.use(ActionBar);
app.use(ActionBarIcon);
app.use(ActionBarButton);

2、效果：

 

3、 HTML结构：

注释：

1、调用了商品信息接口，并v-for，在点击“加入购物车”按钮时，携带商品所有信息

2、点击购物车小图标，将会跳转到购物车页面，使用了vue的声明式路由跳转

<div class="container" v-for="item in goods" :key="item.id">
    <!-- 动作栏start -->
    <div class="action">
		<van-action-bar>
		<van-action-bar-icon icon="shop-o" text="店铺" />
			<van-action-bar-icon icon="chat-o" text="客服" />
			<router-link to="/cart">
			    <van-action-bar-icon icon="cart-o" :badge="store.length" text="购物车" />
			</router-link>
			<van-action-bar-button type="warning" @click="addCart(item)" text="加入购物车" />
			<van-action-bar-button type="danger" text="立即购买" />
		</van-action-bar>
  	</div>
	<!-- 动作栏end -->
</div>

4、逻辑：

import { Toast } from 'vant'

<script setup>
// 添加到购物车
// 1、先获取本地缓存中的数据，查看是否存在购物车数据
let store = JSON.parse(localStorage.getItem('carts'))
const addCart=(product)=>{
  // 2、判断购物车中是否有现在要加购的商品
  if(store){
    // 如果有数据，通过id对比现在要加入购物车的商品是否本身就存在
    let currentInfo = store.find(el=>{
      // 使用数组的find方法，能找到，返回找到的值（true）；找不到，返回false
      return el.id == product.id
    })
    // 当前商品原本存在，就不需要将整个商品添加到购物车，只需要将数量+1，并将+1后的商品内容更新到本地储存
    if(currentInfo){
      currentInfo.num = currentInfo.num + 1
      localStorage.setItem('carts',JSON.stringify(store))
    }else{
      // 当前商品不存在，则为该商品添加num属性，值为1；并将新商品和旧商品一起加到购物车中
      // 需要将原来购物车中的值解构，变成一个一个的对象
      product.num=1
      localStorage.setItem('carts',JSON.stringify([product,...store]))
    }
  }else{
    product.num=1
    localStorage.setItem('carts',JSON.stringify([product]))
  }
  Toast.success('加购成功')
}
<script>

5、最终效果：