[JavaScript知识库]vue2项目复习02-合并参数mockjs模拟数据，在store中存取轮播图数据，使用swiper插件实现轮播图，使用watch+$nextTick解决轮播图

1、合并参数

合并params和query参数

goSearch(){
        //代表的是如果有query参数也带过去
        if (this.$route.query) {
          let location = {
            name: "Search",
            params: { keyword: this.keyword || undefined },
          };
          location.query = this.$route.query;
          this.$router.push(location);
        }
      }

2、mockjs模拟数据

mockjs插件模拟数据

npm install mockjs

1、项目中创建src/moc文件夹
2、准备json数据（moc文件夹创建响应的json文件）
3、把mock数据放在public文件夹下
4、通过mockjs创建虚拟数据
5、在main.js中引入mockServer.js

src/mockServer.js

//先引入mockjs模块
import Mock from 'mockjs';
//把JSON数据格式引入进来[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});

3、在store中存取轮播图数据

灵魂三连环
1、store中的state存储一个数组，因为返回的就是一个数组
2、mutations中修改路逻辑
3、actions中commit数据结果
4、组件（listContainer）中已经携带了bannerList数据
store/home/index.js

import  {reqCategoryList,reqGetBannerList} from '../../api'
//home提供的小仓库
const state={
  //state中数据默认的初始值别些小，服务器返回是对象，则为对象，返回是数组，则为数组
  categoryList:[],
  //banner轮播图中的数组
  bannerList:[]
}
const mutations={
  CATEGORYLIST(state,categoryList){
    state.categoryList=categoryList
  },
  GETBANNERLIST(state,bannerList){
    state.bannerList=bannerList
  }
}
const actions={
  //通过api里面的接口函数，向服务器请求数据
  async categoryList({commit}){
    let result=await reqCategoryList()
    //如果提交数据成功（状态码200），就去提交一个动作个mutation
    if(result.code === 200){
      commit("CATEGORYLIST",result.data)//result.data就是服务器返回的数据
    }
  },
  //获取首页轮播图的数据
  async getBannerList({commit}){
    let result=await reqGetBannerList()
    //如果提交数据成功（状态码200），就去提交一个动作个mutation
    if(result.code === 200){
      commit("GETBANNERLIST",result.data)//result.data就是服务器返回的数据
    }
  }
}
const getters={}

export  default {
  state,
  mutations,
  actions,
  getters
}

views/home/listContainer

  //引入仓库
  import {mapState} from 'vuex'

  export default {
    name: 'ListContainer',
    mounted () {
      //派发action：通过vuex发起ajax请求，将数据存储在仓库里
      this.$store.dispatch('getBannerList')
    },
    computed:{
      ...mapState({
        bannerList:(state)=>{
            return state.home.bannerList
        }
      })
    }
  }
</script>

4、使用swiper插件实现轮播图

1、引包（swiper和相应的css）
2、要先有页面结构
3、要new Swiper实例

5、使用watch+$nextTick解决轮播图

<!--banner轮播-->
          <div class="swiper-container" id="mySwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(carousel,index) in bannerList " :key="carousel.id">
                <img :src="carousel.imgUrl" />
              </div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>

由于没有使用$nextTick()，以下代码是错误的

 watch:{
      bannerList:{
        handler(newValue,preValue){
          //通过watch侦听器监听bannerList的属性的属性值的变化
          //如果执行handler方法，代表组件实例身上属性的属性值已经有了（数组有4个元素）
          //只能保证数据有了，但无法保证v-for执行完毕，这时结构还是不一定有
          let mySwiper = new Swiper(document.getElementsByClassName("swiper-container"),{
            loop:true,
            pagination:{
              el: '.swiper-pagination',
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        }
      },

使用$nextTick要穿一个回调函数
在下次dom更新循环结束后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom

以下代码是正确的

 watch:{
      bannerList(newValue,preValue){
        //nextTick要穿一个回调函数
        //在下次dom更新循环结束后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的dom
        this.$nextTick(()=>{
          //当执行这个回调函数的的时候，服务器的数据已经回来了，v-for执行完毕，也就是说轮播图的结构一定是有了的
          let mySwiper = new Swiper(document.getElementsByClassName("swiper-container"),{
            loop:true,
            pagination:{
              el: '.swiper-pagination',
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        })
      },
    }