Vueプロジェクトでaxiosをグローバルに使う方法の紹介

この記事では、Vue プロジェクトで axios をグローバルに使用する方法を紹介します。一定の参考価値があります。必要な友人は参考にしてください。お役に立てれば幸いです。

方法は 3 つあります:

1. vue-axios と組み合わせる

メイン エントリ ファイル main.js の最初の参照

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

その後、コンポーネント ファイルのメソッドで使用できます

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

2. axios は Vue

のプロトタイプ属性として書き換えられます。最初にメイン エントリ ファイル main.js で参照され、次に vue

のプロトタイプ チェーンにハングされます。

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

コンポーネントでの使用

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

3. Vuex アクションと組み合わせる

vuex ウェアハウス ファイル store.js で参照され、アクションを使用してメソッドを追加します。

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

コンポーネントでリクエストを送信するときに、これを使用する必要があります。$ store.dispatch

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

この記事はここにあります。さらにエキサイティングなコンテンツについては、JavaScript に注目してください。 PHP 中国語 Web サイトのチュートリアル ビデオ。

以上がVueプロジェクトでaxiosをグローバルに使う方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。