快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
开发一个电商购物车系统，使用Vue3和Pinia管理状态。功能包括：1) 商品列表展示 2) 添加/删除购物车商品 3) 数量增减 4) 计算总价 5) 优惠券应用。要求：响应式设计，良好的TypeScript支持，模块化store结构，包含单元测试示例。生成完整的前端页面展示购物车功能。- 点击'项目生成'按钮，等待项目生成完整后预览效果
最近在做一个电商项目，正好用Vue3和Pinia重构了购物车模块，分享一下实战心得。这个组合用起来确实很顺手，特别是状态管理这块，比之前用Vuex清爽多了。
项目结构设计 首先按照功能模块划分store，我把购物车相关的状态和逻辑都放在cartStore里。Pinia的模块化设计让代码组织特别清晰，每个store都是一个独立的单元。为了更好的类型提示，全程使用TypeScript，定义商品接口时明确了id、name、price、image等字段。
核心功能实现 商品列表直接从API获取后存入store，通过computed属性实现响应式渲染。添加商品时调用store的addItem方法，这里要注意处理重复商品的情况 - 我的做法是相同商品只增加数量不重复添加。删除功能更简单，直接根据id从数组中filter掉对应项。
数量增减交互 在购物车列表里，每个商品项旁边都有+/-按钮。点击时调用store的updateQuantity方法，这里有个细节：当数量减到0时自动触发删除，避免出现数量为0的商品卡在购物车里。所有操作都通过Pinia的action处理，组件只需要调用对应方法就行。
价格计算 总价计算是个经典的computed属性应用场景。我在store里定义了一个totalPrice，它会自动追踪cartItems的变化，实时计算商品总价。优惠券功能稍微复杂些，需要额外维护一个discount状态，在计算总价时应用折扣。
测试策略 为关键功能写了单元测试，比如测试添加商品后购物车数量是否正确更新，优惠券应用后总价是否准确打折。Pinia的测试也很方便，可以直接创建一个测试用的store实例。
实际开发中遇到的几个坑： - 刚开始没注意Pinia的store解构会失去响应式，后来改用storeToRefs解决了 - 优惠券逻辑最初放在组件里，发现难以复用，重构到store后清爽很多 - 类型定义不够完善导致一些拼写错误，后来补全Interface后开发体验大幅提升
这个项目在InsCode(快马)平台上可以一键部署体验，他们的在线编辑器直接集成了Vue3环境，不用配置就能运行。我测试时发现连TypeScript支持都是开箱即用的，对于想快速验证想法的场景特别方便。部署后生成的可访问链接，团队成员随时都能查看最新效果，省去了本地启动服务的麻烦。
总结下Vue3+Pinia的优势： - 组合式API让逻辑组织更灵活 - 类型支持完善，开发时就有智能提示 - 模块化store易于维护和扩展 - 性能优秀，只有用到的状态才会触发更新
对于电商类项目，这种架构真的很适合。下次如果再做一个类似的需求，我可能会尝试把商品列表和购物车拆分成两个store，让模块边界更清晰。另外，持久化存储也是个值得优化的点，可以结合localStorage让购物车状态在刷新后不丢失。
快速体验
- 打开 InsCode(快马)平台 https://www.inscode.net
- 输入框内输入如下内容：
开发一个电商购物车系统，使用Vue3和Pinia管理状态。功能包括：1) 商品列表展示 2) 添加/删除购物车商品 3) 数量增减 4) 计算总价 5) 优惠券应用。要求：响应式设计，良好的TypeScript支持，模块化store结构，包含单元测试示例。生成完整的前端页面展示购物车功能。- 点击'项目生成'按钮，等待项目生成完整后预览效果
