Plug in mechanism in Nuxt (integrating axios example & principle analysis)

1. What is the plug-in mechanism?

  • nuxt provides plug-ins to enhance or control existing programs.

1.1 steps of writing plug-ins

1.1.1 step 1:

Create js file in / plugins /

1.1.2 step 2:

Register my.js in the file nuxt.config.js

/**Diffuse Road*/
plugins: [
    {src:'~/plugins/my.js'}
  ],

1.1.3 step 3:

Access any component to view the console, shortcut key: F12

We can see the output twice
 The first is what we used to see
 Output in Nuxt SSR for the second time

1.1.3.1 why does this happen???

Because of the SSR technology used, the front-end is divided into front-end client and front-end server
 Of course, this can also be processed. It needs to be configured in step 2

1.1.3.2 plug in configuration permission

/**
*mode Properties: 
* Do not write the mode attribute, indicating that both the front-end client and the front-end server are effective
* mode: 'client'   Indicates that it is only valid for front-end clients
* mode: 'server'   Indicates that it only takes effect on the front-end server
*/
export default {
  plugins: [
    { src: '~/plugins/my.js' },
    { src: '~/plugins/my1.js', mode: 'client' },
    { src: '~/plugins/my2.js', mode: 'server' }
  ]
}

2. Customize axios

  • The purpose of customizing axios: to write an api.js, which is used to maintain the request path uniformly, and is convenient for programmers to develop

2.1 step 1:

Modify nuxt.config.js and write axios baseURL

2.2 step 2:

Create the / plugins/api.js file and configure it in the nuxt.config.js file (only the front-end client is available)

  • Create api.js file

  • nuxt.config.js configuration content

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 step 3:

Modify api.js and copy the following code to the api.js file

//1) Custom function
const request = {
  testGet : (params) => {
    return axios.get('/web-service/testGet',{
      params
    })
  },
  testPost : (params) => {
    return axios.get('/web-service/testPost',params)
  },
  //......
}

//2) Define axios variable to wait for axios to be received to ensure axios is available
var axios = null
export default ({ $axios }, inject) => {

  //3 save the built-in axios
  axios = $axios

  //4) Hand over custom function to nuxt
  inject('request', request)
}
  • Usage mode
  //Usage 1: in vue, this.$request. Function name ()
  //Usage 2: in asyncData of nuxt, function name ()

2.4 step 4:

Sending ajax in other components

<template>
  <div>
	//Test axios
  </div>
</template>

<script>
export default {
  //Page loaded successfully
  async mounted() {
    //Send ajax
    let baseResult = await this.$request.findAll()
    console.info( baseResult )
  },
}
</script>

<style>
</style>

2.5 step 5:

Write specific functions in api.js

//Custom function
const request = {
  testGet : (params) => {
    return axios.get('/web-service/testGet',{
      params
    })
  },
  testPost : (params) => {
  //axios.post('interface path ', parameter)
    return axios.post('/web-service/testPost',params)
  },
  //... custom functions are not exemplified one by one
  //Method name: function
  findAll : () => {
    return axios.get('/userservice/user/list')
  }
}

2.6 insert: use axios in asyncData

If you need to use custom axios in asyncData, you need to modify the following configuration:

  • 1. Modify the nuxt.config.js configuration file

Enable it to support front-end server-side calls

    1. The way to write calls in other components
<template>
  <div>
  {{myResponse}}
  </div>
</template>

<script>
export default {
  //Page loaded successfully (executed by front-end client)
  async mounted() {
    //Send ajax
    let baseResult = await this.$request.findAll()

    console.info( baseResult )
  },
  // Front end server execution
  async asyncData( context ) {
    let baseResult = await context.app.$request.findAll()
    return {
      myResponse : baseResult.data
    }
  },
}
</script>

<style>
</style>

3. Customize axios schematic diagram

Tags: Programming axios Attribute Vue

Posted on Thu, 19 Mar 2020 02:08:38 -0700 by scarface222