Nuxt中的插件機制(整合axios示例&原理分析)

1. 插件機制幹嗎的?

• nuxt提供插件, 是對已有的程序進行加強或控制。

1.1 編寫插件步驟

1.1.1 步驟一:

在/plugins/目錄下建立js文件

1.1.2 步驟二:

在nuxt.config.js文件中進行註冊my.js

/**漫路*/
plugins: [
    {src:'~/plugins/my.js'}
  ],

1.1.3 步驟三:

隨便訪問任何組件查看控制檯,快捷鍵:F12

咱們能夠看到輸出了兩次
第一次是咱們之前常常看到的樣子
第二次在Nuxt SSR中輸出的

1.1.3.1 因此爲何會這樣呢???

由於使用的SSR技術, 前端分紅了前端客戶端和前端服務端
固然了這個也是能夠處理的, 須要在咱們步驟二中進行配置

1.1.3.2 插件配置權限

/**
*mode屬性: 
* 不寫mode屬性, 表示前端客戶端和前端服務端都生效
* mode: 'client'   表示是僅在前端客戶端生效
* mode: 'server'   表示是僅在前端服務端生效
*/
export default {
  plugins: [
    { src: '~/plugins/my.js' },
    { src: '~/plugins/my1.js', mode: 'client' },
    { src: '~/plugins/my2.js', mode: 'server' }
  ]
}

2. 自定義axios

• 自定義axios的目的: 編寫一個api.js, 用於統一維護請求路徑,便於程序員開發

2.1 步驟一:

修改nuxt.config.js , 編寫axios baseURL

2.2 步驟二:

建立/plugins/api.js文件, 並在nuxt.config.js文件進行配置(僅前端客戶端可用)

• 建立api.js文件

• nuxt.config.js配置內容

plugins: [
    // { src: '~/plugins/my.js' },
    // { src: '~/plugins/my.js',mode: 'client' },
    {src:'~/plugins/my.js',mode:'server'},
    {src:'~/plugins/api.js',mode:'client'}
  ],

2.3 步驟三:

修改api.js , 將下面的代碼拷貝到api.js文件中便可

//1) 自定義函數
const request = {
  testGet : (params) => {
    return axios.get('/web-service/testGet',{
      params
    })
  },
  testPost : (params) => {
    return axios.get('/web-service/testPost',params)
  },
  //......
}

//2) 定義axios變量等待接收axios,保證axios可用
var axios = null
export default ({ $axios }, inject) => {

  //3 保存內置的axios
  axios = $axios

  //4) 將自定義函數交於nuxt
  inject('request', request)
}

• 使用方式

// 使用方式1：在vue中，this.$request.函數名()
  // 使用方式2：在nuxt的asyncData中，content.app.$request.函數名()

2.4 步驟四:

在其它組件中發送ajax

<template>
  <div>
	測試axios
  </div>
</template>

<script>
export default {
  //頁面加載成功
  async mounted() {
    //發送ajax
    let baseResult = await this.$request.findAll()
    console.info( baseResult )
  },
}
</script>

<style>
</style>

2.5 步驟五:

在api.js編寫具體的功能

//自定義函數
const request = {
  testGet : (params) => {
    return axios.get('/web-service/testGet',{
      params
    })
  },
  testPost : (params) => {
  //axios.post('接口路徑',參數)
    return axios.post('/web-service/testPost',params)
  },
  //...自定義函數就不一一舉例了...
  //方法名 : 函數
  findAll : () => {
    return axios.get('/userservice/user/list')
  }
}

2.6 插入: asyncData中使用axios

若是須要在asyncData中使用自定義axios,須要修改以下配置:

• 1.修改nuxt.config.js配置文件

使其支持前端服務器端調用

• 2. 其它組件中調用時的寫法

<template>
  <div>
  {{myResponse}}
  </div>
</template>

<script>
export default {
  //頁面加載成功 (前端客戶端執行)
  async mounted() {
    //發送ajax
    let baseResult = await this.$request.findAll()

    console.info( baseResult )
  },
  // 前端服務端執行
  async asyncData( context ) {
    let baseResult = await context.app.$request.findAll()
    return {
      myResponse : baseResult.data
    }
  },
}
</script>

<style>
</style>

3. 自定義axios原理分析圖