vue中调用方法时，获取组件data中的变量为undefined，解决：this指向问题

今天为大伙分享，在平时工作中遇见的问题及解决方法。今天主要分享的内容主要是在不同作用域中this指向的问题。不多说直接贴代码；
错误示例：

<template>
  <div class="test">
    <button @click="getList()">请求数据</button>
    <button @click="show()">点击</button>
    <div id="login_container"></div>
    <!-- <div>
      <button @click="requestFullScreen()">进入全屏</button>
      <button @click='exitFullScreen()'>退出全屏</button>
    </div> -->
    <div class="baiduMap">
      <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true"></baidu-map>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  components: {
    
  },
  data(){
    return{
      list:[],   
      center: {lng: 0, lat: 0},
      zoom: 100
    }
  },
  methods:{
    getList:function(){  //axios
      this.$http.get("product/index").then(
        function(res){
          console.log(this.list);  //undefined
          this.list = res.data.result;  //赋值不成功
        }
      ).catch(
        function(err){
          console.log(err);
        }
      )
    },

    //微信二维码
    show:function(){
      var obj = new WxLogin({
        self_redirect:true,
        id:"login_container", 
        appid: "申请成功的id", 
        scope: "snsapi_login,snsapi_userinfo", 
        redirect_uri: "重定向url",
        state: "vetwater",
        style: "",
        href: ""
      });
    },
    //地图
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    //全屏，退出全屏
    requestFullScreen: function(){
      var elem =  document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen()
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen()
      } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen()
      } else if (elem.msRequestFullscreen) {
        // elem.msRequestFullscreen() 没有指定元素
        document.body.msRequestFullscreen()
    }
    },
    exitFullScreen: function(element){
      var doc = document.documentElement;
      if (doc.exitFullscreen) {
        doc.exitFullscreen()
      } else if (doc.mozCancelFullScreen) {
        doc.mozCancelFullScreen()
      } else if (doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen()
      } else if (doc.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },
  },
  mounted(){}
}
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 400px;
}
</style>

解决示例：

<template>
  <div class="test">
    <button @click="getList()">请求数据</button>
    <button @click="show()">点击</button>
    <div id="login_container"></div>
    <!-- <div>
      <button @click="requestFullScreen()">进入全屏</button>
      <button @click='exitFullScreen()'>退出全屏</button>
    </div> -->
    <div class="baiduMap">
      <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true"></baidu-map>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  components: {
    
  },
  data(){
    return{
      list:[],   
      center: {lng: 0, lat: 0},
      zoom: 100
    }
  },
  methods:{
    getList:function(){  //axios
      var _this = this;
      console.log(111);
      this.$http.get("product/index").then(
        function(res){
          console.log(_this.list); //[]
          _this.list = res.data.result; //赋值成功，this指向问题
        }
      ).catch(
        function(err){
          console.log(err);
        }
      )
    },

    //微信二维码
    show:function(){
      var obj = new WxLogin({
        self_redirect:true,
        id:"login_container", 
        appid: "申请成功的id", 
        scope: "snsapi_login,snsapi_userinfo", 
        redirect_uri: "重定向url",
        state: "vetwater",
        style: "",
        href: ""
      });
    },
    //地图
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    //全屏，退出全屏
    requestFullScreen: function(){
      var elem =  document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen()
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen()
      } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen()
      } else if (elem.msRequestFullscreen) {
        // elem.msRequestFullscreen() 没有指定元素
        document.body.msRequestFullscreen()
    }
    },
    exitFullScreen: function(element){
      var doc = document.documentElement;
      if (doc.exitFullscreen) {
        doc.exitFullscreen()
      } else if (doc.mozCancelFullScreen) {
        doc.mozCancelFullScreen()
      } else if (doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen()
      } else if (doc.msExitFullscreen) {
        document.msExitFullscreen()
      }
    },
  },
  mounted(){}
}
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 400px;
}
</style>

解释：this在不同作用域，所指向的变量的指针地址时不同的。
补充：如果在使用闭包时，有多层级包裹的函数，最里面的一层函数引用第二层的变量，也是用这种方法来解决的！