解决在vue的mounted中获取对象为null问题

背景

因为 需要在项目中需要将获取的列表对象赋值给另外一个控件。

所以使用了mounted

按照vue的生命周期，在create()中增加了获取数据的getList()方法，然后赋值。

然后在mounted()中增加了对赋值对象的相关操作。

vue生命周期图

问题

按照理想的情况，应该可以将赋值后的对象进行相关操作的。

但是实际结果却是打脸了，获取不到对象数据。

console.log打印出来的结果为null。

按照道理来讲，不应该哈。

解决方案

度娘了下，发现还真是自己的问题，因为在create()中，走的是远程ajax的异步调用。

vue初始化的时候，是按照顺序一路下来的，异步的东西是不会等待你的，所以初始化的data中，当前对象是什么，就会同步传递过来的。

既然找到了真凶，那么处理的方案一般就是下面的方式了。

1、不走mounted()，使用watch的监听方式来处理。

watch: {
     initEditData(){
       //TODO 数据赋值 张三 2022-05-09
     }
  }

2、用await来处理，await一般和ansyc一起的，感兴趣的可以自己去摸下。

/**
* 动态赋值
*/
async function testSetVal() {
    //在此等待数据处理完成
    let valObj= await getList();
    console.log(valObj);
}

总结

涉及到异步，一定要考虑并行的问题

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。