前言：nuxt提供asyncData 和 fetch 灾常，但是初學(xué)者會混亂舌仍，到底用哪個？怎么用习瑰？之類的問題绪颖。下面就詳細說一下
一、asyncData
在官網(wǎng)也說了asyncData是頁面組件使用的甜奄，也就是components目錄下的.vue組件是不可以使用的（使用了不執(zhí)行代碼也不報錯）柠横，所以總結(jié)一下。pages下面的.vue文件（也就是頁面組件）使用asyncData來請求接口數(shù)據(jù)课兄。
但是要注意一點牍氛，asyncData中不可以使用this。
我們可以這樣用：
<template>
<div>
<News />
<ul>
<li v-for='item in list' :key='item.id'>
{{ item.imageName }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'IndexPage',
data () {
return {
list:[],
items:[]
}
},
async asyncData( {$axios} ){
let res = await $axios.get('http://testapi.xuexiluxian.cn/api/slider/getSliders');
let list = res.data.data.list;
return {
list
}
}
}
</script>
二烟阐、fetch
fetch是頁面組件和components目錄中的組件都可以用搬俊，但是頁面組件不會用的，都是在components里面去用的蜒茄，你可以直接請求接口然后渲染數(shù)據(jù)唉擂。
注意：fetch中可以使用this
<template>
<div>
這是news
<ol>
<li v-for='item in items' :key='item.id'>
{{item.imageName}}
</li>
</ol>
</div>
</template>
<script type="text/javascript">
export default{
data () {
return {
items:[]
}
},
async fetch( ){
let res = await this.$axios.get('http://testapi.xuexiluxian.cn/api/slider/getSliders');
let items = res.data.data.list;
this.items = items;
}
}
</script>
上面的代碼，是直接請求接口渲染數(shù)據(jù)的檀葛。但是正常使用是組件請求接口把數(shù)據(jù)給vuex狀態(tài)樹玩祟，然后再做其他操作。
