看不懂来打我,文章根据b站视尚硅谷商城前台项目视频讲解 是轮播图,在三十集,第十分钟
做轮播图的时候,正常使用swiper插件,然后把swiper插件放在mounted里面,但是没有出来效果
引包,引样式(说的是swiper插件),
结构写在哪?初学者肯定说要写在mounted里面,
但是写在mounted里面不行,不出动态效果
为啥?
结构还不完整,为啥不完整,for循环,数据是动态的
数据返回以后,才能v-for,才能遍历数据
组件里面派发action,数据放在vuex里面,是axios发送请求得到的
执行过程:
1.先执行的mounted
2.vuex中action发送请求,并获得数据
3.组件中初始化swiper数据
4.在vuex中mutation修改数据
dispatch里面有异步语句,导致v-for遍历的时候,结构还没有完全
updated:数据更新的时候调用,可以吗?
放这里不行,因为放updated里面会调用多次,其他响应式数据变化的时候一直调用。
笨方法,直接在mounted里面,放一个俩秒的定时器,定时器里面有初始化swiper
因为定时器也是异步的
但是轮播图的分页器一排小点,会晚出来
mounted里面派发一个action,后边还有一个定时器
先执行 action里面有axios请求,请求完修改数据,
定时器
最终解决方案:watch结合this.$nextTick
数据在vuex中,一开始是空数组,请求后变成正常数据
所以数据是有变化过程,可以用watch监听。
watch;:{
//俩种写法,对象
bannerlists:{
handler(newValue,oldValue){
var mySwiper = new Swiper()
}
}
}
1.handler方法执行,代表数据肯定有了,
2.this.$nextTick 代表了结构肯定有了
this.$nextTick:在下次dom更新循环结束以后延迟回调