Vue项目实战-尚品汇--编程式导航带参数路由跳转（三）

组件挂在完毕，想服务器发送请求，通知vuex发请求，获取数据，存储在仓库中

找到store仓库中的home小仓库，编写categoryList方法

actions：调用api接口里面的接口函数调用，向服务器发送请求，获取服务器数据

请求之后拿到promise成功的结果，使用await async，如果code是200代表成功，要解构{commit} 提交mutations，提交result.data数据到mutations；

mutations里面写的方法有state和传的参数categoryList，并修改仓库中的数组；state.categoryList = categoryList (服务器返回的数组)

查看vuex home组件有了相应的数组categoryList

 接下来在TypeNav组件中拿到仓库数组进行展示

TypeNav组件中成功拿到仓库数组 完成数据展示，数据分为三层结构进行展示

数组中的每个元素是一级分类，一级分类中有了child二级分类，接着二级分类里面还有三级分类。

看见项目外观，就能猜出数据格式。

---

 

通过hover 添加样式

 通过检测用户鼠标移上哪一个一级分类，动态添加这个类的样式

 

二级三级样式用js实现，删除:hover样式，添加style

 

<div class="item-list clearfix" :style="{display:currentIndex==index?'block':'none'}">

卡顿现象：用户从一级分类最上面到最下面快速滑动，16个事件没有全部触发，只触发几个事件。

 函数的节流与防抖

 两者区别：

 完成三级联动节流的操作

首先按需引入节流函数

 

 

 

 

 成功完成路由参数跳转

 以上主要内容包括三级列表由静态变为动态，函数防抖和节流，路由跳转。