axios でグローバル登録を実装する方法

この記事では、axios をグローバルに登録する方法に関する関連情報をサンプルコードを通じて詳しく紹介します。axios を必要とする人は、ぜひ一緒に学習してください。

前書き

最近、Vueでプロジェクトを書いたとき、axiosを使用しました。なぜなら、axiosはVue.use()を使用できないため（詳細は、この記事を参照してください）、そのため、すべての.vueでaxiosが使用されます。 .vue ファイルをインポートする必要があります。ファイルが少ない場合は大丈夫ですが、多い場合は少し面倒になります。

後で考えたのですが、グローバル登録を実現するために、Vue プロトタイプに直接 axios を追加できないだろうかと考えました。以下では多くを語る必要はありません。詳細な紹介を見てみましょう。

方法は以下の通りです:

1.まずmain.jsにaxiosを導入します

import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
 el: '#app',
 render:h => h(App)
})

2. .vueファイル内で使用する場合はaxios

<script>
export default {
 name:&#39;app&#39;,
 data(){
  return{
   msg:&#39;hello&#39;
  }
 },
 methods:{
  send(){
   // 注意：因为 axios 是加到 Vue 的原型中了，所以使用 axios 方法时，前面需要加 this
   this.axios.get(&#39;https://www.baidu.com*******&#39;)
   .then(resp => {
    console.log(resp.data)
   }).catch(err => {
    console.log(err);
   })
  }
 }
}
</script>

の前に追加することに注意してください。

上記は私です。皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。

関連記事:

vueでvue-cliを使用してhelloWorldを構築する方法

値渡しの問題に関連するlayui

JavaScriptを使用して宝くじシステムを実装する方法

vueに対する詳細な回答

この変更はコンポーネントに影響を与えますか?

Parcelを使ったパッケージング方法

🎜🎜Vueパッケージングツールの設定方法を詳しく解説🎜🎜

以上がaxios でグローバル登録を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。