最近在做一个电商类的小项目，用Vue3+Pinia实现了一个产品列表和购物车的综合案例。这篇文章要跟大家分享一下我的实现思路和关键点，特别是想学习Vue3状态管理实战的同学，这篇可是必看！
项目结构设计
整个项目采用了标准的Vue3项目结构，主要分为以下几个模块：
- components目录存放可复用的UI组件
- stores目录管理Pinia状态
- views目录处理页面级组件
- router目录配置路由
- api目录封装模拟接口请求
Pinia状态管理实现
创建了两个核心store：
- productsStore负责管理产品列表数据
- cartStore处理购物车相关状态
productsStore中定义了异步获取产品列表的方法，模拟了API请求的延迟效果。这里使用了setTimeout来模拟网络请求，实际项目中可以替换为真实的axios调用。
cartStore实现了几个关键功能：
- 添加商品到购物车
- 从购物车移除商品
- 修改商品数量
- 计算购物车总价
- 获取购物车商品总数
产品列表页实现
产品列表采用响应式网格布局，每个产品卡片包含：
- 产品图片（使用模拟的图片URL）
- 产品名称和价格
- 简短描述
- 加入购物车按钮
这里特别注意了图片的懒加载处理，当产品卡片进入视口时才加载图片，优化页面性能。
购物车功能开发
购物车做成了可滑出的侧边栏形式，主要功能包括：
- 显示已添加的商品列表
- 每个商品项可以调整数量或移除
- 实时计算并显示总价
- 购物车图标显示商品总数
这里处理了几个细节：
- 购物车打开时添加页面遮罩
- 点击遮罩可关闭购物车
- 添加了平滑的展开/收起动画
移动端适配处理
项目还考虑了移动端的适配处理。
路由配置
配置了两个基本路由：
- 首页（产品列表）
- 购物车页面（实际项目中可能需要）
路由守卫处理了页面切换时的购物车状态保存。
样式与交互优化
为了让体验更接近真实项目，做了这些优化：
- 按钮添加了点击反馈效果
- 网络请求时显示加载状态
- 错误处理（虽然模拟API不会出错）
- 响应式布局适配不同屏幕
- 添加了过渡动画提升用户体验
开发中的经验总结
在实现过程中，有几个值得注意的点：
- Pinia的store之间如何共享状态
- 组合式API的使用技巧
- 响应式数据的性能优化
- 组件间的通信方式选择
- 异步操作的错误处理
这个案例虽然不大，但涵盖了Vue3开发的多个核心概念，特别适合作为学习项目。通过InsCode(快马)平台，可以快速生成类似的项目代码，省去了从零搭建的麻烦。平台内置的编辑器可以直接运行和修改代码，还能一键部署查看实际效果，对于学习和demo演示特别方便。
实际使用中发现，这种可视化+即时预览的方式，比本地开发环境更直观，特别适合快速验证想法。对于Vue3初学者来说，能直接看到完整项目的结构和实现方式，学习曲线会平缓很多。
—— by 陈景序，websoft网络软件专家（www.phpwebsoft.com）