前文

今天我们通过一个黑马程序员的一个小案例，来继续巩固Vuex方面的知识

需求拆解：

1.发起网络请求，获取图片数据

2.v-for渲染数据

3.设立监听事件，实时更新索引号的长度

需求拆解：

1.发起网络请求（携带路由传参过来的参数），获取数据

2.使用Vant组件设置动作面板，本质上是Vant封装了一个弹出框效果，通过底部的立即购买，和加入购物车分别控制弹出框是否显示，并且传递上方提示值（需要设置一个变量去映射弹窗状态，这个变量又通过点击事件和两个按钮联系起来）

3.判断是否有库存，如果有，则显示两个按钮，反之则无；其次，就算库存存在，也需要根据是购物车还是立即购买，显示按钮

需求拆解；

1.点击（点击事件）加入购物车之后，验证Vuex库中是否存储token

跳转到登录页面（路由传参：传递自身的页面完整路径，否则无法跳转）

this.$route.fullPath: 获取当前页面完整路径，方便后续回退

1.1无token

登录成功

回退到购物车页面（其中使用push还是replace，使用replace，使用push有路由冗余问题）

登录失败

1.1有token

封装请求（携带token和商品SKUID：用于判断产品库存是否唯一），发起网络请求

关键点：

2.当我们需要设计一个需要验证token权限的操作时，可以考虑路由跳转时携带当前完整路径，方便跳回

3.当发起需要携带token的网络请求，可以考虑在单个api节点或者总的axios总节点中设置携带token

需求拆解:

1.父组件向子组件传递计算量过去，同时传递监听事件

2.子组件接受参数，左右加减按钮分别绑定一个点击事件，自定义事件传递修改后参数

3.输入框绑定一个焦点事件，当失焦时更新数据（需做数据清洗），自定义事件传递修改后参数

需求拆解：

1.底部自带跳转导航 - 首页和分类模块（路由设定加点击事件就好）

2.购物车和立即购买部分，传递标题和true就好

前端学习（七）：智慧商城项目-商品详情页部分