2-9 不同城市,显示不同数据

https://cn.vuejs.org/v2/api/#activated

activated

• 类型：Function
  
• 详细：
  keep-alive 组件激活时调用。
  该钩子在服务器端渲染期间不被调用。

  一、InTheaters/index.vue

  在正在热映的组件中,获取城市发送网络请求

  Tips:在activated生命周期函数中去发送请求

import axios from 'axios-jsonp-pro';
export default {
  name: "InTheaters",
  data(){
    return{
      movies:'',
      isLoading:true
    }
  },
  activated:async function(){
    console.log(1)
    var city = this.$store.state.city;
    var url =`https://douban-api.zce.now.sh/v2/movie/in_theaters?city=${city}`;
    var data = await axios.jsonp(url)
    this.movies = data.subjects;
    this.isLoading = false
  }
};

二、同一城市,不要重复发送网路请求

1.data中定义prevCity记录之前的城市 2.网络请求发送完毕之后记录城市 3.发送请求之前,判断当前城市和之前的城市是否一样。

export default {
  name: "InTheaters",
  data(){
    return{
      movies:'',
      isLoading:true,
      //记录先前的城市
      prevCity:""
    }
  },
  activated:async function(){
    var city = this.$store.state.city;
    if(this.prevCity === city){
      return false
    }
    var url =`https://douban-api.zce.now.sh/v2/movie/in_theaters?city=${city}`;
    var data = await axios.jsonp(url)
    this.movies = data.subjects;
    this.isLoading = false
    /* 发送请求完毕之后,记录一下city */
    this.prevCity = city;
  }
};
</script>