VUE3 入門チュートリアル: Vue.js プラグインを使用して API インターフェイス リクエストをカプセル化する

Vue.js は現在最も人気のあるフロントエンド フレームワークの 1 つであり、Vue3 は Vue.js の最新バージョンであり、よりシンプルな構文と優れたパフォーマンスを提供します。 Vue.js の開発では、データ リクエストは重要な部分であり、API インターフェイスのリクエストもプログラマーの一般的なタスクの 1 つです。このチュートリアルでは、Vue.js プラグインを使用して API インターフェイス リクエストをカプセル化する方法を詳しく紹介します。

Vue.js プラグインとは何ですか?

Vue.js では、プラグインは Vue.js アプリケーションにグローバル レベルの機能を提供できる機能モジュールです。機能をプラグインにカプセル化し、プロパティ、ディレクティブ、コンポーネントなどを Vue.js アプリケーションに挿入できます。 Vue.js では、Vue Router や Vuex などの一般的なプラグインが公式に提供されていますが、必要な機能を実現するために独自のプラグインを作成することもできます。

1. プラグインの作成

グローバル関数またはプロパティを定義することで、単純なプラグインを作成できます。ただし、このチュートリアルでは、API インターフェイスのリクエストをプラグインにカプセル化する方法を紹介します。まず、HTTP リクエストを処理するための一般的な JavaScript ライブラリである axios をインストールする必要があります。

npm install axios --save

次に、次のように API プラグインを作成します。

import axios from 'axios'

const ApiPlugin = {
install(Vue) {

Vue.prototype.$api = {
  get(url) {
    return axios.get(url)
  },
  post(url, data) {
    return axios.post(url, data)
  }
}

}
}

export default ApiPlugin

上記のコードでは、ApiPlugin プラグインを定義します。 Vue コンストラクターをパラメーターとして受け入れる install() メソッド。 $api 属性は install() メソッドで定義され、2 つのメソッド (get と post) を含むオブジェクトが Vue.prototype にアタッチされます。

2. プラグインの使用

API プラグインを作成したので、それを Vue.js アプリケーションで使用する必要があります。次のコードを使用して、プラグインを Vue.js アプリケーションに導入できます:

import Vue from 'vue'
import App from './App.vue'
import ApiPlugin from '。 / api-plugin'

Vue.use(ApiPlugin)

new Vue({
render: h => h(App),
}).$mount( ' #app')

上記のコードでは、まず import ステートメントを通じて ApiPlugin をアプリケーションに導入し、次に Vue.use() メソッドを使用してプラグインをインストールします。最後に、Vue インスタンスを作成し、 #app 要素にマウントします。これで、$api 属性を使用してアプリケーションで API リクエストを行うことができます。

3. API リクエストの送信

GET リクエストを送信して、返されたデータを取得するとします。これを実現するには、Vue コンポーネントの $api.get() メソッドを使用します。