通过axios来提供vue组件中需要的数据

从后台服务器获取数据是一个基本需求，目前最直观的能想到的方法就是通过axios来调用服务端接口获得数据，然后绑定到组件的某个data上。

这是页面上的一个table，data绑定到了tableData上，

<template>
    <el-table :data="tableData" border stripe style="width: 100%">
    <el-table-column prop="id" label="id" width="180"></el-table-column>
    <el-table-column prop="name" label="名称" width="180"></el-table-column>
    <el-table-column prop="version" label="版本号" width="180"></el-table-column>
    <el-table-column prop="type" label="类型" width="180"></el-table-column>
    <el-table-column prop="time" label="时间"></el-table-column>
  </el-table>
</template>

tableData的定义，

data() {
    return {
        tableData: this.getTableData()
    };
}

getTableData的定义，

methods: {
    getTableData() {
        console.log('get junction data...')
        this.$axios.get('/data', {timeout: 5000}).then(res=>{
            console.log(res.data)
            return res.data;
        }).catch(err => {
        });
        console.log('finish get junction data...')
    }
}

运行后发现table一直是空的，经过调试，发现console上的日志顺序不对，

所以判断this.$axios.get应该是一个异步方法，而且“return res.data”只是跳出了里面的匿名函数，并不能达到返回值给tableData的目的。仔细想想发现，没有必要返回，因为tableData可以直接访问到，所以可以直接把接口中得到的数据交给tableData就可以达到目的了。

代码改成，

methods: {
    getTableData() {this.$axios.get('/data', {timeout: 5000}).then(res=>{
            this.tableData = res.data;
        }).catch(err => {
        });
    }
}

这样就能正常工作了。

其实getTableData方法不需要放在data函数的返回中执行，只要放在页面加载的过程中就可以，不过目前data函数就是每次加载的时候都会调用，所以这么放也能达到目的。