1. 基于nuxt下asyncData,fetch发送axios请求
1.1 普通ajax(nuxt和axios整合)
使用前提:配置baseURL
axios: {
baseURL:'http://localhost:10010/api'
},
- 普通axios操作
this.$axios 就可以获得axios实例,从而发送ajax
//get请求
this.$axios.get('路径',参数)
//post请求
this.$axios.post('路径',参数)
1.2 使用asyncData–一次请求
- asyncData 方法,在渲染组件之前异步获取数据。
asyncData
方法会在组件(限于页面组件)每次加载之前被调用。- asyncData方法在组件渲染之前执行了,组件还没有渲染,没有this。
- 在asyncData方法中,不能使用this。
- asyncData语法1:使用 context 对象
<template>
{{名称}}
</template>
<script>
export default {
//asyncData不能使用this(当前组件)
//提供第一个参数context,表示上下文(nuxt所有功能)
asyncData( context ) {
//发送ajax
let 数据 = context.$axios.get('','')
// 将数据组合并返回
return {
名称: 数据
}
}
}
</script>
- asyncData语法2:对context对象进行解构,context.$axios —> { $axios }
<script>
export default {
async asyncData( {$axios} ) {
//发送ajax
let { data } = await $axios.get('路径')
//封装
return {
变量: 查询数据
}
}
}
</script>
普通ajax和asyncData对比
1.3 使用asyncData–多次请求
<script>
//很少直接使用“响应对象”
export default {
async asyncData( {$axios} ) {
//发送多次请求
let [响应1,响应2] = await Promise.all([请求1, 请求2])
//返回数据
return {
变量1: 响应1,
变量2: 响应2
}
}
}
</script>
<script>
//对“响应对象”进行解构 响应1 --> { data }
//“响应1”和“响应2”,都可以解构出data,变量名重复,建议采用别名 { data: 别名}
export default {
async asyncData( {$axios} ) {
//发送多次请求
let [ { data: d1 }, {data:d2} ] = await Promise.all([请求1, 请求2])
//返回数据
return {
变量1: d1.data,
变量2: d2.data
}
}
}
</script>
1.4 fetch发送ajax
- fetch 方法用于在渲染页面前填充应用的状态树(store)数据, 与 asyncData 方法类似,不同的是它不会设置组件的数据。
1.5 nuxt 整合 vuex
//state区域,相当于定义变量
export const state = () => ({
})
//mutations区域,用于修改数据
export const mutations = {
方法名 (state,值) {
}
}
nuxt.js官网可以搜到