1、mock插件使用
mock用来拦截前端ajax请求，返回我么们自定义的数据用于测试前端接口。
将不同的数据类型封装为不同的json文件，创建mockServer.js文件
banner、floor分别为轮播图和页面底部的假数据。
mockServer.js文件
import Mock from 'mockjs'
//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})
//记得要在main.js中引入一下
//import ''@/mock/mockServer
2、vuex数据存储与使用
我们会把公共的数据放在store中，然后使用时再去store中取。
以我们的首页轮播图数据为例。
1、在轮播图组件ListContainer.vue组件加载完毕后发起轮播图数据请求。
mounted() {this.$store.dispatch("getBannerList")},
2、请求实际是在store中的actions中完成的
actions:{//获取首页轮播图数据async getBannerList({commit}){let result = await reqGetBannerList()if(result.code === 200){commit("BANNERLIST",result.data)}}}
3、获取到数据后存入store仓库，在mutations完成
/唯一修改state的部分mutations:{BANNERLIST(state,bannerList){state.bannerList = bannerList}},
4、轮播图组件ListContainer.vue组件在store中获取轮播图数据。由于在这个数据是通过异步请求获得的，所以我们要通过计算属性computed获取轮播图数据。
ListContainer.vue代码
<script>
import {mapState} from "vuex";
export default {name: "index",//主键挂载完毕，请求轮播图图片mounted() {this.$store.dispatch("getBannerList")},computed:{...mapState({bannerList: (state => state.home.bannerList)})}
}
</script>
总结：只要是公共数据都会放在store中，之后的实现步骤就是上面的固定步骤。
3、swiper插件实现轮播图
swiper官网
官网中给出了代码实例：
做一个简要总结：（代码可以直接复制本小节最后面的代码）
（1）安装swiper
（2）在需要使用轮播图的组件内导入swpier和它的css样式
（3）在组件中创建swiper需要的dom标签（html代码，参考官网代码）
（4）创建swiper实例
注意：在创建swiper对象时，我们会传递一个参数用于获取展示轮播图的DOM元素，官网直接通过class（而且这个class不能修改，是swiper的css文件自带的）获取。但是这样有缺点：当页面中有多个轮播图时，因为它们使用了相同的class修饰的DOM，就会出现所有的swiper使用同样的数据，这肯定不是我们希望看到的。
解决方法：在轮播图最外层DOM中添加ref属性
<div class="swiper-container" id="mySwiper" ref="cur">
通过ref属性值获取DOM
let mySwiper = new Swiper(this.$refs.cur,{...})
<!--banner轮播--><div class="swiper-container" id="mySwiper" ref="cur"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(carouse,index) in bannerList" :key="carouse.id"><img :src="carouse.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev" ></div><div class="swiper-button-next"></div></div>
<script>
//引入Swiper
import Swiper from 'swiper'
//引入Swiper样式
import 'swiper/css/swiper.css'
</script>
接下来要考虑的是什么时候去加载这个swiper，我们第一时间想到的是在mounted中创建这个实例。
但是会出现无法加载轮播图片的问题。
原因：
我们在mounted中先去异步请求了轮播图数据，然后又创建的swiper实例。由于请求数据是异步的，所以浏览器不会等待该请求执行完再去创建swiper，而是先创建了swiper实例，但是此时我们的轮播图数据还没有获得，就导致了轮播图展示失败。
mounted() {//请求数据this.$store.dispatch("getBannerList")//创建swiper实例let mySwiper = new Swiper(document.getElementsByClassName("swiper-container"),{pagination:{el: '.swiper-pagination',clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})},
解决方法一：等我们的数据请求完毕后再创建swiper实例。只需要加一个1000ms时间延迟再创建swiper实例.。将上面代码改为：
mounted() {this.$store.dispatch("getBannerList")setTimeout(()=>{let mySwiper = new Swiper(document.getElementsByClassName("swiper-container"),{pagination:{el: '.swiper-pagination',clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})},1000)},
方法一肯定不是最好的，但是我们开发的第一要义就是实现功能，之后再完善。
解决方法二：我们可以使用watch监听bannerList轮播图列表属性，因为bannerList初始值为空，当它有数据时，我们就可以创建swiper对象
watch:{bannerList(newValue,oldValue){let mySwiper = new Swiper(this.$refs.cur,{pagination:{el: '.swiper-pagination',clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})}}
即使这样也还是无法实现轮播图，原因是，我们轮播图的html中有v-for的循环，我们是通过v-for遍历bannerList中的图片数据，然后展示。我们的watch只能保证在bannerList变化时创建swiper对象，但是并不能保证此时v-for已经执行完了。假如watch先监听到bannerList数据变化，执行回调函数创建了swiper对象，之后v-for才执行，这样也是无法渲染轮播图图片（因为swiper对象生效的前提是html即dom结构已经渲染好了）。
完美解决方案：使用watch+this.$nextTick()
官方介绍：this. $nextTick它会将回调延迟到下次 DOM 更新循环之后执行（循环就是这里的v-for）。 监听数据已经回来了
个人理解：无非是等我们页面中的结构都有了再去执行回调函数
完整代码
<template><!--列表--><div class="list-container"><div class="sortList clearfix"><div class="center"><!--banner轮播--><div class="swiper-container" id="mySwiper"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(carouse,index) in bannerList" :key="carouse.id"><img :src="carouse.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev" ></div><div class="swiper-button-next"></div></div></div></div></div></div>
</template>
<script>
//引入Swiper
import Swiper from 'swiper'
//引入Swiper样式
import 'swiper/css/swiper.css'import {mapState} from "vuex";export default {name: "index",//主键挂载完毕，ajax请求轮播图图片mounted() {this.$store.dispatch("getBannerList")},computed:{...mapState({//从仓库中获取轮播图数据bannerList: (state) => {return state.home.bannerList}})},watch:{bannerList(newValue,oldValue){//this.$nextTick()使用this.$nextTick(()=>{let mySwiper = new Swiper(document.getElementsByClassName("swiper-container"),{pagination:{el: '.swiper-pagination',clickable: true,},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})})}}
}
</script>
注意：之前我们在学习watch时，一般都是监听的定义在data中的属性，但是我们这里是监听的computed中的属性，这样也是完全可以的，并且如果你的业务数据也是从store中通过computed动态获取的，也需要watch监听数据变化执行相应回调函数，完全可以模仿上面的写法。
不建议使用dom操作获取dom. 使用ref
4、将轮播图模块提取为公共组件
需要注意的是我们要把定义swiper对象放在mounted中执行，并且还要设置immediate：true属性，这样可以实现，无论数据有没有变化，上来立即监听一次。
上一小节刚刚讲了props实现父组件向子组件传递消息，这里同样也会将轮播图列表传递给子组件，原理相同。
公共组件Carousel代码
<template><div class="swiper-container" ref="cur" id="floor1Swiper"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(carouse,index) in carouselList" :key="carouse.id"><img :src="carouse.imgUrl"></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>
</template><script>
import Swiper from "swiper";
import 'swiper/css/swiper.css'
export default {name: "Carousel",props:["carouselList"],watch: {carouselList: {//这里监听，无论数据有没有变化，上来立即监听一次immediate: true,//监听后执行的函数handler(){//第一次ListContainer中的轮播图Swiper定义是采用watch+ this.$nextTick()实现this.$nextTick(() => {let mySwiper = new Swiper(this.$refs.cur,{loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',// clickable: true},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})})}}}
}
</script><style scoped></style>
Floor组件引用Carousel组件<Carousel :carouselList="list.carouselList"/>
我们还记得在首页上方我们的ListContainer组件也使用了轮播图，同样我们替换为我们的公共组件。
ListContainer组件引用Carousel组件 <Carouse :carouselList="bannerList"/>
注意：
（1）老师将该组件在main.js中引入，并定义为全局组件。我这里只是在使用到该组件的地方引入并声明（个人认为轮播图组件还算不上全局组件）。
（2）引用组件时要在components中声明引入的组件。
（3）我们将轮播图组件已经提取为公共组件Carouse，所以我们只需要在Carouse中引入swiper和相应css样式。
