Vue3 mounted()里调用axios的方法，遇到的坑

最近在学习vue3做项目。

很简单的一个需求，居然遇到了很多坑.....

我的vue对象里，有个data属性tableData，用于给页面绑定数据。

data() {
         return {tableData: [] }
}

我希望在mounted()里使用axios去后台拿数据

mounted() {
                axios.get('/ajax/getScoreList').then(response => {
                    this.tableData = response.data;
                });
}

这样实现没问题，但是我想把axios的调用写到methods方法里，坑来了。。。

我想当然的写到一个方法里，然后在mounted里调用

methods: {
    getScoreList: function(callback){
          axios.get('/ajax/getScoreList').then(response => {
            this.tableData = response.data;
          });
    }
},
mounted() {
                this.getScoreList()
},

没有效，this.tableData是空的。

然后网上找了一圈，建议methods的方法 return一个返回值。

于是参考网上的方法修改为：

methods: {
    getScoreList: function(callback){

                let res;
                axios.get('/ajax/getScoreList').then(response => {
                     res = response.data;
                  });

                return res;
        }

},

mounted() {
                this.tableData = this.getScoreList();
}

发现还是拿不到值。

令人惊讶的是，如此简单的需求，在网上几乎找不到正确的解决方法。(不得不吐槽现在的csdn，好多都是复制别人的代码，很多根本就是错的也在复制，浪费时间误人子弟。当然我不是说所有人，大部分都是这种没用的文章)，最后好不容易才找到一个解决方法，是需要用回调函数：

methods: {
               getScoreList: function(callback){
                      axios.get('/ajax/getScoreList').then(response => {
                        callback(response.data);
                      });
                },
                getScoreListCallback: function(data){
                      this.tableData = data;
                }

},

mounted() {
               this.getScoreList(this.getScoreListCallback);
}