文章目录
1. 路由切换定时器问题 - 常见轮播图
<script>
// 将轮播图的定时器交给组件管理
data() {
return {
timer: {}
}
},
methods: {
play() {
this.timer = setInterval(function() {
}, 2000);
}
},
// 组件挂载时,播放轮播图
mounted() {
this.play();
},
// 路由切换时,自动会销毁组件 - 故执行停止定时器
beforeDestory() {
clearInterval( this.timer );
}
</script>
2. 父组件传数据给轮播图子组件问题
AutoPhotoPlayer2.vue - 轮播图子组件
<template>
<div class="photo-player">
<ul class="photo-player-lists">
<li v-for="(value, key) in photos" v-if="key==index" :key="key"><img :src="value"/></li>
</ul>
<ul class="photo-player-button">
<li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key"
:key="key"></li>
</ul>
</div>
</template>
<script>
export default {
name: "AutoPhotoPlayer",
data() {
return {
index: 0,
length: 0,
//用来停止轮播图定时器,重点
timer: {}
}
},
props: ["photos", "photosLength"],
methods: {
change() {
let that = this;
this.timer = setInterval(() => {
that.index++;
// 必须在内部写这个每时每刻都要从data获取长度 - that.photosLength
if (that.index == that.photosLength) {
that.index = 0;
}
}, 1000*2);
}
},
created() {
this.change();
},
beforeDestroy() {
clearInterval(this.timer);
}
}
</script>
<style scoped>
html, body {
margin: 0;
padding: 0;
}
.photo-player {
width: 100%;
height: 170px;
overflow: hidden;
position: relative;
}
.photo-player-lists {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.photo-player-lists li {
list-style-type: none;
width: 100%;
height: 100%;
}
.photo-player-lists li img {
width: 100%;
height: 100%;
}
.photo-player-button {
position: absolute;
margin: 0;
padding: 0;
bottom: 30px;
left: 198px;
list-style-type: none;
}
.photo-player-button li {
list-style-type: none;
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
float: left;
cursor: pointer;
}
.white {
background: #ffffff;
}
.active {
background: #0000ff;
}
</style>
home.vue - 父组件
<template>
<div class="home" >
<auto_photo_player :photos="autoPhotos" :photosLength="updatePhotosLength"/>
</div>
</template>
<script>
// 导入轮播图组件
import AutoPhotoPlayer from "@/components/index/AutoPhotoPlayer2.vue"
export default {
name: 'Home',
data() {
return {
autoPhotos: [],
}
},
components: {
auto_photo_player: AutoPhotoPlayer,
},
methods: {
clearTime: function(){
clearInterval();
}
},
computed: {
updatePhotosLength: {
get: function() {
return this.autoPhotos.length;
}
}
},
created: async function () {
// 从后台请求轮播图的图片
var {data: result} = await this.$http.get("http://localhost:8080/apiGateway/advService/advs");
result.data.forEach((item, index) => {
if (item.type_id == null) {
this.autoPhotos.push(this.constantValue.nginxPrefix + item.img);
}
})
}
}
</script>
3. 异步请求发送不按执行顺序解决
添加setTimeout进行延迟发送
if(token != null && token != undefined && fromPath == "/carts" && fromPath != targetPath ) {
// 这里发送了3条异步请求更新数据
$store.dispatch("aUpdateCartsList");
if($store.state.CartUpdateFlag == true) {
// 这里需要重新拉取服务器的数据。必须要延迟加载 - 0.5秒
setTimeout(function() {
console.log("======1秒后 - 符合重新向服务器拉取请求")
$store.dispatch("aGetCartsList");
}, 500)
}
}
3. 异步请求导致数组不一致解决方案
var $this = this;
if (index != -1) {
$this.products.push(item);
// 这里进行获取数组长度
var length1 = this.products.length;
var {data: result} = await $this.$http.get("http://localhost:8080/apiGateway/productService/products/" + item.product_id);
setTimeout(function () {
// 赋值给这里使用 - 避免数组不一致的情况
var length = length1;
$this.products[length-1] = result
}
}
4. 异步请求尽量放在created(){} 生命周期里面而不是mounted(){}
5. 关闭ESLint语法检查 - 实在是太严格了
6. Devtools不能在控制台使用的情况 - 解决方案
原因:引用的js文件是生产压缩的vue.min.js文件
使用源码vue.js文件即可