vue实现购物车

最新推荐文章于 2024-08-09 17:39:37 发布

行动很重要冲冲冲

最新推荐文章于 2024-08-09 17:39:37 发布

阅读量760

点赞数 2

文章标签： vue.js vue全家桶 vue入门 vue实现购物车

本文链接：https://blog.csdn.net/weixin_52703987/article/details/123222170

版权

本文探讨如何使用Vue.js来构建购物车功能，通过结构化的数据模型和组件化设计提高可扩展性。数据结构包括产品列表和购物车列表，组件设计分为生产列表和购物车列表，每个组件都遵循原子化原则。文章还指出初始设计在应对商品信息变更时的不足，并提出改进方案。

摘要由CSDN通过智能技术生成

Vue实现购物车

● 用数据描述所有的内容

● 数据要结构化，易于程序操作（遍历、查找）

● 可扩展性

设想原型图
在这里插入图片描述
数据结构设计

{
	productionList: [
    {
    	id: 1,
      title: '商品1',
      price: 10
    },
    // ...
  ],
  cartList: [
    {
    	id: 1,
      quantity: 1
    },
    // ...
  ]
}

我一开始的设计，没有满足可扩展性的需要，例如商品改名，商品打折扣，商品列表需要修改，购物车列表也需要修改

{
  goods: [
    {
      gid: 1,
      name: '商品1',
      price: '10'
    },
    // ...
  ],
  shopping: [// 购物车列表
    {
      gid: 3,
      name: '商品3',
      price: '20',
      num: 1 // 商品数量
    },
    // ...
  ]
}

组件设计

● 从功能上拆分层次

● 尽量让组件原子化

● 容器组件（只管数据）& UI组件（只显示视图）

在这里插入图片描述

<APP>
	<ProductionList>
    <ProductionListItem />
    <ProductionListItem />
    <ProductionListItem />
  </ProductionList>
  <CartList>
    <CartItem />
    <CartItem />
  </CartList>
</APP>

组件结构和我一开始的设计基本一致