Provide と Inject を使用して Vue3 プラグインを作成する方法

Vue3 プラグインの動作が以前と異なる理由

Vue2 では、ほとんどのプラグインがこれにプロパティを挿入します。たとえば、Vue ルーターには this.$router を通じてアクセスできます。

ただし、setup() メソッドには、これへの同じ参照が含まれなくなりました。この変更の主な理由は、Typescript のサポートを追加することです。

では、Vue3 でプラグインにアクセスするにはどうすればよいでしょうか? Provide と Inject を使用すると、Vue プログラムに依存関係を注入できます。 Provide/inject は依存関係の注入に使用されます。これにより、Vue プログラムのルート ディレクトリにプラグインを提供し、それらを子コンポーネントに注入できます。

Composition API では、これら 2 つのメソッドは setup() メソッド中にのみ呼び出すことができます。

provide と inject とは何ですか

依存関係を識別するには何らかのキーが必要ですが、JavaScript のシンボルはこの要件をさらに複雑にする可能性があります。

provide メソッドはシンボルを値に関連付け、inject メソッドは同じシンボルを使用してこの値を取得します。

以下は例です:

import { provide, inject } from 'vue'  const LoggedInSymbol = Symbol()  const ParentComponent = {   setup() {     provide(LoggedInSymbol, true)   } }  const DeepDescendent = {   setup() {     // 第二个可选参数是默认值（如果不存在）     const isLoggedIn = inject(LoggedInSymbol, false)     return {       isLoggedIn     }   } }

Vue3 このモードでは、いくつかの非常に実用的なテクニックを実現できます。

依存関係はプログラム内でグローバルに提供できます

グローバル スコープで何かを提供したい場合は、VUE インスタンスを宣言するときに app.provide を使用できます。その後、同様の方法で注入を行うことができます。

main.jsimport { createApp } from 'vue' import App from './App.vue'   const app = createApp(App)  const ThemeSymbol = Symbol() app.provide(ThemeSymbol, 'dark')   app.mount('#app')

ref を使用してレスポンシブ データを提供できます

これは、レスポンシブ データを子コンポーネントに渡す場合にも非常に便利です。 ref() を使用してメソッドの reactive プロパティを渡すだけです。

// 生产者r (父组件) const LoggedInSymbol = Symbol() const loggedIn = ref('true') provide(LoggedInSymbol, loggedIn)  // 消费者 (子组件) const theme = inject(LoggedInSymbol, ref('false'))

プラグインでのprovideとinjectの使用方法

実際のプラグインの設計は、先ほど見た簡単な例と非常によく似ています。

しかし、単一の値を使用するのではなく、組み合わせた関数を使用したいのです。これは Vue3 の大きな利点です。関数に基づいてコードを整理および抽出できる機能です。

コードは編成された合成関数を使用して作成する必要があるため、プラグインを作成するには、これらの Provide メソッドと Inject メソッドを作成するだけで済みます。

Vue3 Comboposition API ドキュメントで提供されているプラ​​グインの例を簡単に見てみましょう。

Plugin.jsconst StoreSymbol = Symbol()  export function provideStore(store) {   provide(StoreSymbol, store) }  export function useStore() {   const store = inject(StoreSymbol)   if (!store) {     // throw error, no store provided   }   return store }

実際のコンポーネントでは次のように使用されます。

// 在组件根目录提供 store // const App = {   setup() {     provideStore(store)   } }  const Child = {   setup() {     const store = useStore()     // use the store   } }

上記のコードによると、一部のルート コンポーネントでは、プラグインを提供し、コンポーネントの関数を渡します。次に、それを使用したいコンポーネントのどこにでも注入する必要があります。

コンポーネントは実際にprovide/inject呼び出しを行う必要はなく、プラグインによって公開されるprovideStore/useStoreメソッドを呼び出すだけです。

古いプラグインを引き続き使用できますか?

簡単に言えば、「はい」です。もっと言いたいなら、それはあなたの考え次第です。

オプション API を引き続き使用し、これを以前と同じ方法で参照することができ、古いプラグインはすべて変更されずに機能します。

しかし、Vue3 に移行してそのすべての機能を活用することには価値があると感じます。

Vue2 のオプション API を使用する限り、プラグインは正常に動作します。ただし、よく管理されているプラ​​グインやライブラリの多くは、Vue3 のサポートを追加する必要があります。

以上がProvide と Inject を使用して Vue3 プラグインを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。