常见问题解决 - 路由切换定时器问题，父组件传数据给轮播图子组件问题、异步请求执行顺序、关闭Eslint、devtools不能使用

文章目录

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
        }
}