1、安装axios,这里是安装Nuxt集成好的 @nuxtjs/axios
npm i @nuxtjs/axios
2、在 plugins 下面创建axios.js,并配置
export default function ({store, redirect, app: { $axios }}) {
// 数据访问前缀
$axios.defaults.baseURL = 'http://127.0.0.1:8185/api/'
// request拦截器,我这里设置了一个token,当然你可以不要
$axios.onRequest(config => {
config.headers.common['X-Access-Token'] = store.state.token
})
$axios.onError(error => {
})
// response拦截器,数据返回后,你可以先在这里进行一个简单的判断
$axios.interceptors.response.use(response => {
})
}
3、配置nuxt.config.js
4、非SSR使用(和在vue中使用是一样的)
getDataStat(){
this.$axios.get('homeBack/dataStat')
.then(res => {
this.dataStat = res.data
})
},
5、SSR使用,也就是要在渲染页面之前把数据返回
async asyncData (context) {
let parms = {
page: 1,
blogCatgId: '1'
}
let[res1,res2] = await Promise.all([
// 获取博客文章数据
context.$axios.post('blogArticle/frontList',parms)
.then((res) => {
return res
}),
// 获取友情连接数据
context.$axios.get('myFriend/homePageList')
.then((res) => {
return res
}),
])
return{
blogList : res1.data,
blogTotal : res1.total * 1,
friendList : res2.data,
}
},
data(){
return {
// 博客列表数据
blogList:[],
// 博客总条数
blogTotal:0,
// 友情链接数据
friendList:[],
}
},
6、说一下这个context对象,这里还可以引用其它对象,具体参看Nuxt文档
如果你想获取路由中的参数,或者想获取Vuex中的数据怎么做呢?
这个context就是一个上下文对象,打印看一下
你可以通过context这个上下文对象,取出你想要的任何数据