Vue2.5学习笔记（七）使用Axios发起ajax请求获取数据

1.安装Axios

npm intall axios

2.引入

import axios from 'axios'

3.使用

由于页面（页面也是一个组件）是由各个不同的功能组件组成的，例如下面这个页面：

各个组件都有自己的数据需要从服务器请求，在请求Home页面时，可以让各个页面分别发起ajax请求，但这样下来一个页面将会发起多个请求，导致页面性能降低。
因此，推荐一个页面仅由承载该页面的父组件发送一个ajax请求，再通过父组件给子组件传值的方式将数据传递给子组件。

我们在父组件的mounted生命周期钩子中调用发起请求的方法：

    mounted(){
        this.getHomeInfo();
    },
    methods:{
        getHomeInfo:function(){
            axios.get('/static/mock/data.json')
            .then(this.getHomeInfoSucc);
        },
        getHomeInfoSucc(res){
            res = res.data;
            if(res.ret && res.data){
                const data = res.data;
                this.city = data.city;
                this.swiperList = data.swiperList;
                this.iconList = data.iconList;
                this.recommendList = data.recommendList;
            }
        }
    }

获取到数据后，先将数据保存在父组件的data中，再传递给子组件：
Home.vue 的template

<template>
    <div>
        <home-header :city="city"></home-header>
        <home-swiper :swiperList="swiperList"></home-swiper>
        <home-icons :iconList="iconList"></home-icons>
        <home-recommend :recommendList="recommendList"></home-recommend>
    </div>
</template>

以子组件HomeHeader.vue为例演示接受数据：

<script>
export default {
    props:{
        city:String
    },
    name:'HomeHeader',
}
</script>

4.优化

在渲染HomeSwiper组件时，出现了一些小bug：幻灯片默认首先会停留在最后一页。这是因为当我们使用swiper组件时，在获取ajax数据之前，swiper接受的数据是父组件传过来的空数组。
这样解决：等真正的数据传过来之后swiper才被创建。

<swiper ref="mySwiper" :options="swiperOption" v-if="showSwiper">