安裝
注意這里的寫法贬养，是@nuxtjs/axios
而不是直接axios团驱，否則你下面配置的時(shí)候會(huì)提示找不到axios
cnpm install @nuxtjs/axios
邏輯上的坑
unxtjs的ajax挣输，你先別往你那個(gè)異步上去思考刊驴，其實(shí)這里面所有的ajax最后都會(huì)形成頁面。你別想著胸墙，我一點(diǎn)按鈕我注，調(diào)用一個(gè)方法，然后再ajax去加載數(shù)據(jù)迟隅。因?yàn)槲覀冏詈笕慷紩?huì)生成靜態(tài)但骨，所以任何的獲取數(shù)據(jù)的操作，最后都會(huì)變成頁面的跳轉(zhuǎn)智袭。
所以奔缠，官方給了一套寫法，你必須按照這個(gè)去寫吼野，
并且這里的ajax會(huì)再頁面渲染之前就執(zhí)行校哎。這個(gè)東西跟生命周期這些都是平級的。
// 這里引入context是上下文參數(shù)瞳步，代替了this闷哆，
// 因?yàn)樵赼syncData方法是在組件初始化時(shí)調(diào)用，所以沒法通過this來引用組件實(shí)例對象单起。
asyncData(context) {
return context.$axios.get('index/query')
.then(res => {
//獲取到內(nèi)容
console.log(res.data.result[0].logo);
//賦值
return {txt:res.data.result[0].logo};
})
},
然后打開nuxt.config.js
開始修改阳准，先把代理這塊寫好
modules: [
'@nuxtjs/axios'
],
axios: {
//baseURL:"api.dangyunlong.com", //設(shè)置統(tǒng)一的基礎(chǔ)url，線上環(huán)境關(guān)閉代理時(shí)使用它馏臭。
proxy: true, // 表示開啟代理
prefix: '/api', // 表示給請求url加個(gè)前綴 /api
credentials: true // 表示跨域請求時(shí)是否需要使用憑證
},
proxy: {
'/api': {
target: 'http://localhost:3002/', // 目標(biāo)接口域名
pathRewrite: {
'^/api': '/', // 把 /api 替換成 /
changeOrigin: true // 表示是否跨域
},
}
},
然后下面，加上axios讼稚，防止二次打包
build: {
vendor: ['element-ui','axios'],
postcss: {
preset: {
features: {
customProperties: false
}
}
},
這樣就可以了括儒。
延申：如何同時(shí)發(fā)起多個(gè)請求
async asyncData({$axios}){
let index = await $axios.get("index/query");
let list = await $axios.get("index/query/list");
return {
index: index.data.result[0],
list: list.data.result
}
},
必須使用這種方式才能同時(shí)發(fā)起多個(gè)請求。
延申2锐想，如果通過接收route的參數(shù)帮寻，發(fā)送帶參數(shù)的請求
async asyncData ({params,$axios}) {
//這里有幾個(gè)巨坑的地方 這里的params 就是指route.params
//這里的store就是指 $store
let data = await $axios.get(`article/query?id=${params.id}`);
return {
data: data.data.result[0]
}
}
把params傳入asyncData里面
這里就又有一個(gè)問題，這里的params直接就指你的route.params了赠摇，跟vuecli里面的this.$route.params用法不一樣固逗。我當(dāng)時(shí)查了半天才恍然大悟。
