1. 插件
1.1 插件机制
- nuxt提供插件,对已有程序增强或控制。
- 编写插件步骤
1)在 ~/plugins/ 目录下创建js文件
2)在nuxt.config.js 文件进行注册
3)其他组件进行测试
- 配置插件执行位置
1.2 自定义axios:实现步骤
- 自定义axios目的:编写一个api.js文件,用于统一维护请求路径
- 前提,修改nuxt.config.js,编写axios baseURL
- 配置插件执行位置
- 修改api.js,拷贝固定内容
//自定义函数
const request = {
test : (params) => {
return axios.get('/web-service/test',{
params
})
},
}
var axios = null
export default ({ $axios }, inject) => {
//3) 保存内置的axios
axios = $axios
//4) 将自定义函数交于nuxt
// 使用方式1:在vue中,this.$request.xxx()
// 使用方式2:在nuxt的asyncData中,content.app.$request.xxx()
inject('request', request)
}
- 其他组件中发送ajax
- 修改api.js 编写具体的功能
//自定义函数
const request = {
test : (params) => {
return axios.get('/web-service/test',{
params
})
},
//方法名 : 函数
findAll : () => {
return axios.get('/userservice/user/list')
}
}
1.3 自定义axios:原理分析
- 测试 asyncData
<template>
<div>
{{pageInfo}}
</div>
</template>
<script>
export default {
//页面加载成功 (前端客户端执行)
async mounted() {
//发送ajax
let { data } = await this.$request.findAll()
console.info( data )
},
// 前端服务端执行
async asyncData( context ) {
let { data } = await context.app.$request.findAll()
return {
pageInfo : data.data
}
},
}
</script>
<style>
</style>