Vue3 プラグインで Provide と Inject を使用する方法-Vue.js-php.cn

Vue3 プラグインで Provide と Inject を使用する方法

WBOY

リリース： 2023-06-01 20:34:04

転載

1298 人が閲覧しました

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メソッドを呼び出すだけです。