vue專案及axios請求獲取資料（cp網站搭建制作）

一般vue專案中 一個頁面是由多個元件組成的，各個組建的資料都是統一在主介面的元件中傳送axios請求獲取，這樣極大地提高了效能。

一、首先匯入用到的元件和axios

cp網站搭建制作TG<hahanunu>

import HomeHeader from ‘./components/Header’

import HomeSwiper from ‘./components/Swiper’

import HomeIcons from ‘./components/Icons’

import HomeRecommend from ‘./components/Recommend’

import HomeWeekend from ‘./components/Weekend’

import axios from ‘axios’

export default {

name: ‘Home’,

components: {

HomeHeader,

HomeSwiper,

HomeIcons,

HomeRecommend,

HomeWeekend

},

二、在data中將要用到的資料給一個初始值，為空

data () {

return {

swiperList: [],

iconList: [],

recommendList: [],

weekendList: []

}

},

三、在methods中寫方法，傳送axios獲取資料

methods: {

getHomeInfo () {

axios.get(‘/api/index.json’)

.then(this.getHomeInfoSucc)

},

getHomeInfoSucc (res) {

res=res.data

if (res.ret && res.data) {

const data = res.data

this.swiperList = data.swiperList

this.iconList = data.iconList

this.recommendList = data.recommendList

this.weekendList = data.weekendList

}

}

},

mounted () {

this.getHomeInfo()

}

}