# vue-xiaomi-shoppingcart-mobile

**Repository Path**: kevinleeeee/vue-xiaomi-shoppingcart-mobile

## Basic Information

- **Project Name**: vue-xiaomi-shoppingcart-mobile
- **Description**: **案例：小米购物车移动端**

技术：vue2.x/vuex/请求数据函数封装

功能：

- 同步`localStorage`数据到`state`数据里
- 手机列表渲染
- 设置购物车总价和总数量
- 设置购物车列表数据，增减商品的数量和价格同步关联`localStorage`
- 根据`localStorage`数据渲染购物车列表
- 购物车加减计算器组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-12-09
- **Last Updated**: 2022-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

**案例：小米购物车移动端**

技术：vue2.x/vuex/请求数据函数封装

功能：

- 同步`localStorage`数据到`state`数据里
- 手机列表渲染
- 设置购物车总价和总数量
- 设置购物车列表数据，增减商品的数量和价格同步关联`localStorage`
- 根据`localStorage`数据渲染购物车列表
- 购物车加减计算器组件

```
//项目目录：
├─vue.config.js - 配置代理解决跨域
├─src
|  ├─App.vue - 根组件挂载路由占位
|  ├─main.js - 入口文件
|  ├─views
|  |   ├─Cart.vue - 购物车页面
|  |   └Home.vue - 首页页面
|  ├─utils
|  |   ├─config.js - 配置请求地址API
|  |   ├─https.js - 封装axiosGet函数
|  |   └tools.js - 工具：数据格式化/同步localStorage函数
|  ├─store
|  |   ├─actions.js - 管理commit方法和payload
|  |   ├─index.js 
|  |   ├─mutations.js - 管理逻辑方法操作state数据对其增删改
|  |   └state.js - 中央状态池
|  ├─services
|  |    ├─index.js - 将getData函数请求回来的数据进行再加工
|  |    └request.js - 封装getData函数可以自定义参数修改url
|  ├─router
|  |   └index.js
|  ├─components
|  |     ├─TotalPanel - 购物车页面底下的总价组件
|  |     |     └index.vue - 绑定视图/组件更新时同步localStorage
|  |     ├─PhoneList - 手机列表组件
|  |     |     ├─index.vue - 遍历子项/拿到state数据并传子组件
|  |     |     └Item.vue - 绑定视图/点击事件/派发任务到mutations
|  |     ├─Header 公共的头部组件
|  |     |   ├─BackIcon.vue - 后退组件
|  |     |   ├─CartIcon.vue - 购物车(0) 组件/组件更新时同步localStorage
|  |     |   └index.vue 
|  |     ├─CartList 购物车列表组件
|  |     |    ├─index.vue - 遍历子项/拿到state数据并传子组件
|  |     |    ├─Item.vue - 绑定视图/导入加减计算器组件
|  |     |    ├─Calculator - 加减计算器组件
|  |     |    |     └index.vue - 绑定视图/点击事件/派发任务到mutations
```



***问题：为什么要设置购物车总价和总数量？***

子组件的单击加入购物车按钮会`dispacth`到`mutations`里操作`state.totalPrice`实现价格和数量的累加或累减



***问题：如何实现点击加入购物车时购物车页面显示相关的商品信息？***

子组件的单击加入购物车按钮会将相应的商品信息加入到`state.cartData`数组里实现根据数组属性渲染列表



***问题：当重复商品增加数量或减少数量时如何同步总数量和总价格数据？***

找到点击当前商品索引`index`，给当前重复添加的商品`state.cartData[idx]`累加数量和价格



***问题：为什么在header组件或购物车页面底部总价组件更新时同步`localStorage`?***

因为点击按钮时会触发修改`state`数据，而header组件和总价组件刚好是根据`state`绑定了视图, 所以视图会随着`state`数据修改而实时渲染更新，通过`updated`生命钩子函数可以同步`localStorage`数据

源码地址：https://gitee.com/kevinleeeee/vue-xiaomi-shoppingcart-mobile