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

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 などの一般的なプラグインが公式に提供されていますが、必要な機能を実現するために独自のプラグインを作成することもできます。

プラグインの作成

グローバル関数またはプロパティを定義することで、単純なプラグインを作成できます。ただし、このチュートリアルでは、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 にアタッチされます。

プラグインの使用

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 リクエストを行うことができます。