Introduction à la méthode d'utilisation globale d'axios dans le projet vue

Le contenu de cet article est une introduction à la méthode d'utilisation globale d'axios dans le projet Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Il existe trois méthodes :

1. Combiné avec vue-axios

Première citation

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);

Ensuite, vous pouvez l'utiliser dans les méthodes du fichier du composant

this.axios.get('/api/usrmng')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

2. axios est réécrit car l'attribut prototype de Vue

est d'abord référencé dans le fichier d'entrée principal main.js, puis accroché à la chaîne prototype de vue

import axios from 'axios'
Vue.prototype.$http = axios

Utilisez

this.$http.get('/api/usrmng')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

3. > est référencé dans le fichier d'entrepôt vuex store.js et utilise l'action pour ajouter la méthode

import Vue from 'Vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'root'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})

export default store

dans le composant Lors de l'envoi d'une demande, vous devez utiliser this.$store.dispatch

methods: {
  submitForm () {
     this.$store.dispatch('login')
  }
}

Cet article est par ici, il y a d'autres contenus passionnants Vous pouvez faire attention à la colonne

Vidéo du didacticiel JavaScript

du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!