So verwenden Sie Provide und Inject, um ein Vue3-Plug-In zu erstellen

Warum Vue3-Plugins anders funktionieren als zuvor

In Vue2 fügen die meisten Plugins Eigenschaften hinzu. Über diesen $router kann beispielsweise auf den Vue-Router zugegriffen werden.

Allerdings enthält die Methode setup() nicht mehr denselben Verweis darauf. Der Hauptgrund für diese Änderung besteht darin, Unterstützung für Typescript hinzuzufügen.

Wie greifen wir also auf unsere Plug-Ins in Vue3 zu? Wir können Provide und Inject verwenden, um Abhängigkeiten in das Vue-Programm einzufügen. Provide/inject wird für die Abhängigkeitsinjektion verwendet, die es uns ermöglicht, Plugins im Stammverzeichnis des Vue-Programms bereitzustellen und diese dann in untergeordnete Komponenten zu injizieren.

In der Composition API können diese beiden Methoden nur während der setup()-Methode aufgerufen werden.

Was sind Provide und Inject? Wir benötigen eine Art Schlüssel, um Abhängigkeiten zu identifizieren, und das Symbol von Javascript kann diese Anforderung noch verstärken.

Dann verknüpft die Bereitstellungsmethode unser Symbol mit einem Wert und die Injektionsmethode ruft diesen Wert mit demselben Symbol ab.

Hier ist ein Beispiel:

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 kann in diesem Modus einige sehr praktische Techniken implementieren.

Abhängigkeiten können global im Programm bereitgestellt werden

Wenn wir etwas im globalen Bereich bereitstellen möchten, können wir app.provide verwenden, wenn wir unsere VUE-Instanz deklarieren. Die Injektion kann dann auf die gleiche Weise erfolgen.

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

Sie können ref verwenden, um reaktionsfähige Daten bereitzustellen

Dies ist auch sehr praktisch, wenn wir reaktionsfähige Daten an untergeordnete Komponenten übergeben möchten. Verwenden Sie einfach ref(), um eine reaktive Eigenschaft unserer Methode zu übergeben.

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

So verwenden Sie Provide und Inject in einem Plugin

Das eigentliche Entwerfen eines Plugins ist dem einfachen Beispiel, das wir gerade gesehen haben, sehr ähnlich.

Aber wir wollen keinen einzelnen Wert verwenden, sondern eine kombinierte Funktion. Dies ist ein großer Vorteil von Vue3 – die Möglichkeit, Code basierend auf Funktionen zu organisieren und zu extrahieren.

Da unser Code sowieso mit organisierten Kompositionsfunktionen geschrieben werden sollte, müssen wir nur diese Bereitstellungs- und Injektionsmethoden erstellen, um ein Plugin zu schreiben.

Werfen wir zunächst einen kurzen Blick auf die Plug-in-Beispiele in der Vue3 Composition API-Dokumentation.

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 }

wird in tatsächlichen Komponenten wie folgt verwendet:

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

Gemäß dem obigen Code stellen wir in einigen Stammkomponenten Plug-Ins bereit und übergeben ihnen Komponentenfunktionen. Dann müssen wir es in unsere Komponente einfügen, wo immer wir es verwenden möchten.

Die Komponente muss nie tatsächlich die Provide/Inject-Aufrufe durchführen, sondern ruft nur die vom Plugin bereitgestellten ProvideStore/UseStore-Methoden auf.

Kann ich das alte Plug-in noch nutzen?

Einfach gesagt: ja. Wenn Sie mehr sagen möchten, hängt es von Ihren eigenen Gedanken ab.

Sie können die Options-API weiterhin verwenden und auf die gleiche Weise wie zuvor darauf verweisen, und alle alten Plugins funktionieren unverändert.

Aber die Migration zu Vue3 und die Nutzung aller Funktionen scheint sich zu lohnen.

Solange Sie die Options-API von Vue2 verwenden möchten, funktioniert Ihr Plug-in normal. Viele gut gepflegte Plugins oder Bibliotheken sollten jedoch Unterstützung für Vue3 hinzufügen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Provide und Inject, um ein Vue3-Plug-In zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!