Vue Academy · レッスン

プラグインでのグローバルプロパティとprovide/inject

app.config.globalProperties.$myPlugin、注入用のapp.provide()、TypeScriptの拡張

レッスン 2/413 ステップ

「プラグインでのグローバルプロパティとprovide/inject」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

サービスを公開する2つの方法

プラグインで機能を共有する方法は2つあります。グローバルプロパティ（従来のOptions API形式で、this.$xからアクセスします）と、provide/inject（Composition API形式）です。現代的なコードではprovide/injectが推奨されますが、グローバルプロパティもOptions APIのコードベースでは役立ちます。

app.config.globalProperties

app.config.globalProperties.$http = clientを設定すると、すべてのOptions APIコンポーネントでthis.$httpを利用できます。コンポーネントのデータとの衝突を避けるため、先頭に$を付けるのが慣例です。

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

Options APIでの$httpの利用

Options APIコンポーネントの中では、グローバルプロパティにthisを通じてアクセスできます。

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

Composition APIでthisを使えない理由

<script setup>には、コンポーネントインスタンスに束縛されたthisがありません。そのため、this.$httpは機能しません。Composition APIでは代わりに注入された値を読み取ります。これが推奨される方法です。

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

プラグインでのprovide

Composition APIをサポートするには、プラグインで同じサービスをキーに関連付けてapp.provideする必要があります。Options APIにはグローバルプロパティを、Composition APIにはprovideを使い、両方を提供してください。

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

Composition APIでのinject

コンポーネントはinject(httpKey)でサービスを読み取ります。エクスポートしたSymbolキーを使うと、文字列の入力ミスを防ぎ、型付けも可能になります。

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

InjectionKeyによる型付き注入キー

完全な型安全性を得るには、InjectionKey<T>でキーに型を付けます。するとinjectが正しい値の型を自動的に推論します。

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

モジュール拡張による$httpの型付け

this.$httpを型安全にするには、.d.tsファイルでVueのComponentCustomPropertiesインターフェースを拡張します。これにより、TypeScriptはどこでもthis.$httpの型を認識できます。

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

拡張定義を置く場所

拡張定義はモジュールでなければならず（末尾にexport {}が必要です）、使用しているtsconfig.jsonに含める必要があります。公開時にも型定義が一緒に配布されるよう、プラグインの近くに配置してください。

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

グローバルプロパティは慎重に使う

グローバルプロパティは便利ですが、依存関係が隠れてしまいます。そのため、コンポーネントのテストや動作の把握が難しくなります。provide/inject（明示的で、ツリー単位にスコープされます）を優先してください。グローバルプロパティは、本当にアプリ全体で必要な、Options APIから使いやすいユーティリティに限定しましょう。

両方のAPIをサポートする

完成度の高いプラグインはOptions APIとComposition APIの両方をサポートします。グローバルプロパティを設定すると同時に値をprovideし、グローバルプロパティと型付き注入キーの両方について型拡張も提供します。利用側はコンポーネントのスタイルに合う方を選べます。

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

クイックチェック

プラグインにおけるグローバルプロパティとprovide/injectの理解度を確認しましょう。

対話的なレッスンで答える

まとめ

プラグインサービスの公開について学びました。

app.config.globalProperties.$httpでOptions APIのthis.$httpを利用できるようにします
Composition APIにはthisがないため、代わりにinjectを使います
幅広く対応するには、グローバルプロパティとprovideされた値の両方を用意します
ComponentCustomPropertiesを拡張してthis.$httpに型を付けます
inject側には型付きのInjectionKeyを使います

無料で開始

AI チューターと学ぶ HTML — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 42
レッスン: 156

無料で学習を始めるコース全体を表示

よくある質問

「プラグインでのグローバルプロパティとprovide/inject」レッスンは無料ですか？

はい。「プラグインでのグローバルプロパティとprovide/inject」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「プラグインでのグローバルプロパティとprovide/inject」で何を学びますか？

app.config.globalProperties.$myPlugin、注入用のapp.provide()、TypeScriptの拡張ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「プラグインでのグローバルプロパティとprovide/inject」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る