Vue项目流程3，TheSearch模块中商品分类与过渡动画，全部商品分类优化，合并参数，mock，完成轮播图，swiper基本使用，watch+nextTick解决问题，将轮播图拆分为公用的全局组件

TheSearch模块中商品分类与过渡动画

1、在TheSearch页面使用TypeNav组件
2、设置TypeNav中分类模块默认为显示v-show="show"
3、当组件挂载完毕，让show属性变为false

if(this.$route.path == '/search'){
    this.show = false
}

4、当鼠标移到全部商品上时，show变成true，移开变成false

//当鼠标移入的时候，让商品分类进行展示
enterShow(){
    this.show = true
},
leaveIndex(){
    this.currentIndex = -1
    //判断只有在TheSearch组件才执行
    if(this.$route.path != '/home'){
        this.show = false
    }
}

6、过渡动画效果

前提：组件|元素务必要有v-if|v-show指令才可以进行过读动画

      // 过渡动画的样式
//进入的开始状态
.sort-enter{
    height: 0px;
}
//进入过渡动画的结束动画
.sort-enter-to{
    height: 461px;
}
//定义动画时间、速率
.sort-enter-active{
    transition: all .5s linear;
}

全部商品分类优化

将TypeNav组件里的发送请求数据的代码移到App组件中，无论使用TypeNav多少次，请求只发送一次。

  mounted(){
    //通知Vuex发请求，获取数据，存储于仓库中
    this.$store.dispatch("categoryList");
  }

合并参数

合并params与query参数，让路由跳转时同时携带params参数和query参数。

//判断如果路由跳转时带有params参数，也要传递过去
if(this.$route.params){
    location.params = this.$route.params
    //整理完参数
    location.query = query;
    //路由跳转
    this.$router.push(location);
}

if (this.$route.query){
    let location = {name:'search',params:{keyword:this.keyword || undefined}}
    location.query = this.$route.query
    this.$router.push(location)
}

mock

mock数据（模拟）:前端mock数据不会和服务端进行任何通信。
需要用到插件mockjs
安装：npm install mockjs
使用步骤：
1、在src文件夹中创建一个文件夹mock
2、准备JSON数据（在mock文件夹中创建相应的JSON文件）
3、把mock数据需要的图片放置到public文件夹中【public文件夹会把相应的资源原封不动到dist文件夹中】
4、开始mock（虚拟数据），创建mockServer.js文件通过mockjs插件实现。
5、使用

//先引入mockjs模块
import Mock from 'mockjs'
//把JSON数据格式引入[webpack中JSON数据格式、图片默认对外暴露]
import banner from './banner.json'
import floor from './floor.json'

//mock数据 第一个参数：请求的地址，第二个参数：请求数据
Mock.mock('/mock/banner',{code:200,data:banner})
Mock.mock('/mock/floor',{code:200,data:floor})

6、mockServer.js文件在入口文件中引入（至少需要执行一次才能模拟）
7、二次封装axios，新建文件mockAjax.js将默认地址改为mock。
8、在ListContainer组件发起请求并将数据存储在仓库里，并且编写相应的方法
9、让ListContainer组件获取到数据

computed:{
    ...mapState({
        bannerList:state => state.home.bannerList
    })
}

完成轮播图

swiper的基本使用

1、安装并引入引入相应的CSS和JS包：cnpm install --save swiper@5

安装的是5版本

2、页面中的结构务必要有
3、new Swiper实例【轮播图添加动态效果】

watch+nextTick解决问题

watch：数据监听，监听已有数据变化。
nextTick：在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM。
  watch: {
    //监听bannerList数据的变化，因为这条数据发生过变化，由空数组变为有四个元素的数组
    bannerList: {
        //只能保证数据已经有了，没办法保证v-for已经执行结束了，即无法保证有结构
      handler() {
        this.$nextTick(()=>{
            //当执行这个回调函数时，保证服务器的数据已经回来了
          var mySwiper = new Swiper(this.$refs.mySwiper, {
          loop: true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            //点击小球时也切换图片
            clickable:true
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          }
        });
        })
      }
    }
  }

TheFloor组件

getFloorList的action需要在TheHome组件当中发，不能在TheFloor组件内部发，因为需要v-for遍历TheFloor组件。

<TheFloor v-for='floor in floorList' :key="floor.id"/>

通信方式：
props:用于父子组件之间通信
自定义事件：@on|@emit 可以实现子给父通信
全局事件总线：$bus 全能
pubsub-js:vue当中几乎不用 全能
插槽
vuex
消息订阅

此时可以在mounted当中书写Swiper，第一次是在当前组件内部发送请求，动态渲染解构【前台至少服务器数据需要回来】因此不行；然而这次的请求不是在TheFloor当中发送，而是TheHome中发送请求，当初始化实例时，数据已经完全得到了，所以在mounted可以写。

将轮播图拆分为公用的全局组件

                 <div
                    class="swiper-slide"
                    v-for="carousel in list"
                    :key="carousel.id"
                  >

import Swiper from "swiper";
export default {
    name:'TheCarousel',
    props:['list'],
    watch: {
    list: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          var mySwiper = new Swiper(this.$refs.cur, {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              //点击小球时也切换图片
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },
  },
}