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>