vue-cli3采坑记

出现状况

一开始，在vue-cli3中我通过axios获取了后台数据并推到了data里面的mapdata数据内。然后想通过调取高德的API进行地图的绘制，但是我发现无论如何取不到mapdata的数据。以下我贴一下源代码

export default {
  name: 'map',
  data () {
    return {
        mapdata: []
    }
  },
  mounted(){
    this.axios.get('url')
    .then(response => {
        // this.mapdata = response.data.data;
        for(var i=0; i<response.data.data.length; i++)
        {
            this.mapdata.push({
                'name': response.data.data[i].name,
                'center': response.data.data[i].location
            });
        }
        console.log(this.map);
    })
    .catch(function (error) {
      console.log(error)
    })
    this.create();
  },
  methods: {
    createmap()
      {
          var map = new AMap.Map('map', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            mapStyle: 'amap://styles/grey',
            zoom: 13,
            features: ['bg', 'road', 'building', 'point'],
            viewMode: '3D',
            center: [106.515301,29.510008]
            });
          var layer = new Loca.PointLayer({
            map: map,
            eventSupport: true,    // selectStyle 配置需要开启 eventSupport: true
            });
          var data = this.mapdata;
          layer.setData(data, {
            lnglat: 'center'
            });
          layer.render();
      }
    }
  }

然后我分别打印了一下mouted和methods里面的mapdata数据，我发现在mouted中出现的是[ {}, {}, {},{} _{_}ob_{_} observe] 数据特征，而在methods中打印的数据直接就为[ _{_}ob_{_} observe] 。

解决方法

一开始我在官方文档里面进行查询，让我发现貌似这样可以。

官方文档

然后在methods里面修改成了如下所示：

var data = JSON.parse(JSON.stringify(this.mapdata));

然而并没有起什么作用，但是问题的关键来了，在mouted里面我也这样对mapdata进行了处理。打印出来发现把后面的observe对象消除了，此时我便想，会不会是位置不对。然后我修改了代码

export default {
  name: 'map',
  data () {
    return {
        mapdata: []
    }
  },
  mounted(){
    this.axios.get('url')
    .then(response => {
        // this.mapdata = response.data.data;
        for(var i=0; i<response.data.data.length; i++)
        {
            this.mapdata.push({
                'name': response.data.data[i].name,
                'center': response.data.data[i].location
            });
        }
        var map = new AMap.Map('map', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            mapStyle: 'amap://styles/grey',
            zoom: 13,
            features: ['bg', 'road', 'building', 'point'],
            viewMode: '3D',
            center: [106.515301,29.510008]
            });
          var layer = new Loca.PointLayer({
            map: map,
            eventSupport: true,    // selectStyle 配置需要开启 eventSupport: true
            });
          var data = JSON.parse(JSON.stringify(this.mapdata));
          layer.setData(data, {
            lnglat: 'center'
            });
          layer.render();
    })
    .catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    }
  }

最后发现这样竟然成功了！！！

原因

在后面，我去查了下observe的具体详情

observe是作为数据的的观察者所拥有的，同理还有如下两个

Observer: 数据的观察者，让数据对象的读写操作都处于自己的监管之下
Watcher: 数据的订阅者，数据的变化会通知到Watcher，然后由Watcher进行相应的操作，例如更新视图
Dep: Observer与Watcher的纽带，当数据变化时，会被Observer观察到，然后由Dep通知到Watcher

而observe则检查对象上是否有_ob_d属性，如果存在，则表明该对象已经处于Observer的观察中，如果不存在，则new Observer来观察对象。如果我们要写到methods里面的方法中，再由mouted去调用它则进行了两次观察。它会直接封闭这个数据导致我们只能看。因此，我们最好就是调用data里面数据后立即使用它，否则会出现意想不到的情况

vue-cli3采坑记