Comment utiliser Provide et Inject pour créer le plug-in Vue3

Pourquoi les plugins Vue3 fonctionnent différemment qu'avant

Dans Vue2, la plupart des plugins y injectent des propriétés. Par exemple, le routeur Vue est accessible via this.$router.

Cependant, la méthode setup() ne contient plus la même référence à cela. La raison principale de ce changement est d'ajouter la prise en charge de Typescript.

Alors, comment accéder à nos plug-ins dans Vue3 ? Nous pouvons utiliser provide et inject pour nous aider à injecter des dépendances dans le programme Vue. Provide/inject est utilisé pour l'injection de dépendances, ce qui nous permet de fournir des plugins dans le répertoire racine du programme Vue, puis de les injecter dans des composants enfants.

Dans l'API Composition, ces deux méthodes ne peuvent être appelées que lors de la méthode setup().

Que sont fournir et injecter

Nous avons besoin d'une sorte de clé pour identifier les dépendances, et le symbole Javascript peut aggraver cette exigence.

Ensuite, la méthode provide associera notre symbole à une valeur, et la méthode inject récupérera cette valeur avec le même symbole.

Voici un exemple :

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 peut mettre en œuvre des techniques très pratiques grâce à ce mode.

Les dépendances peuvent être fournies globalement dans le programme

Si nous voulons fournir quelque chose dans la portée globale, nous pouvons utiliser app.provide lors de la déclaration de notre instance VUE. L'injection peut alors se faire de la même manière.

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

Vous pouvez utiliser ref pour fournir des données réactives

C'est également très pratique si nous voulons transmettre des données réactives aux composants enfants. Utilisez simplement ref() pour transmettre une propriété réactive de notre méthode.

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

Comment utiliser provide et inject dans un plugin

En fait, la conception d'un plugin est très similaire à l'exemple simple que nous venons de voir.

Mais nous ne voulons pas utiliser une seule valeur, mais une fonction combinée. C'est un énorme avantage de Vue3 : la capacité d'organiser et d'extraire du code en fonction de fonctions.

Étant donné que notre code doit de toute façon être écrit avec des fonctions de composition organisées, il nous suffit de créer ces méthodes provide et inject pour écrire un plugin.

Tout d'abord, jetons un bref coup d'œil aux exemples de plug-ins fournis dans la documentation de l'API de composition Vue3.

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 }

sera utilisé comme ceci dans les composants réels :

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

Selon le code ci-dessus, dans certains composants racine, nous fournissons des plug-ins et leur transmettons des fonctions de composant. Ensuite, nous devons l'injecter dans notre composant là où nous voulons l'utiliser.

Le composant n'a jamais besoin d'effectuer les appels provide/inject, mais appelle uniquement les méthodes provideStore/useStore exposées par le plugin.

Puis-je toujours utiliser l'ancien plug-in ?

Pour faire simple : oui. Si vous voulez en dire plus, cela dépend de vos propres pensées.

Vous pouvez continuer à utiliser l'API Options et la référencer de la même manière qu'avant, et tous les anciens plugins fonctionnent inchangés.

Mais migrer vers Vue3 et profiter de toutes ses fonctionnalités semble en valoir la peine.

Tant que vous souhaitez utiliser l'API Options de Vue2, votre plug-in fonctionnera normalement. Cependant, de nombreux plugins ou bibliothèques bien entretenus devraient ajouter la prise en charge de Vue3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!