Einführung in die Methode zur globalen Verwendung von Axios im Vue-Projekt

Der Inhalt dieses Artikels ist eine Einführung in die Methode zur globalen Verwendung von Axios im Vue-Projekt. Ich hoffe, dass er für Sie hilfreich ist.

Es gibt drei Methoden:

1. Kombiniert mit vue-axios

Erstes Zitat

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

in der Haupteintragsdatei main.js

Dann können Sie es in den Methoden in der Komponentendatei verwenden

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

2 . axios wird neu geschrieben, da das Prototypattribut von Vue

zuerst in der Haupteintragsdatei main.js referenziert und dann an die Prototypenkette von Vue

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

angehängt wird

Verwenden Sie

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

3. Kombinieren Sie die Vuex-Aktion

Referenziert Verwenden Sie in der Vuex-Warehouse-Datei store.js die Aktion, um die Methode

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

hinzuzufügen. Wenn Sie eine Anforderung in der Komponente senden, müssen Sie diese verwenden this.$ store.dispatch

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

Dieser Artikel ist hier drüben. Weitere spannende Inhalte finden Sie im JavaScript-Tutorial-Video PHP Chinesische Website Spalte!

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur globalen Verwendung von Axios im Vue-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!