Fonction app.provide() de Vue3

Vue3 全局 APIVue3 API globale

app.provide()C'est une fonction très importante qui nous permet de fournir des données ou des méthodes au niveau supérieur de l'application, rendant ces données ou méthodes accessibles et utilisables dans n'importe quel composant de l'application entière.

En utilisantapp.provide()etinjectla combinaison, nous pouvons facilement partager des données entre plusieurs composants, évitant le passage fastidieux de props et d'événements.

1. Qu’est-ce qu’uneapp.provide()？

app.provide()Il s'agit d'un mécanisme d'injection de dépendances fourni dans Vue3. Grâce à lui, nous pouvons définir des données ou méthodes globales au niveau supérieur de l'application, puis dans n'importe quel composant enfant, viainjectpour obtenir ces données ou méthodes. Cette approche est très adaptée au partage de données ou de fonctionnalités entre plusieurs composants, sans avoir besoin de les transmettre couche par couche via des props ou des événements.

1.1 Pourquoi en avons-nous besoinapp.provide()？

Dans les grandes applications Vue, nous devons souvent partager des données ou des méthodes entre plusieurs composants. Si nous transmettons ces données via des props ou des événements, le code devient complexe et difficile à maintenir. Cependant,app.provide()cela fournit un moyen plus concis et plus efficace de résoudre ce problème.

2. app.provide()La syntaxe de base de

app.provide()Sa syntaxe de base est très simple ; elle accepte deux paramètres :

Exemple

app.provide(key, value)
  • key: une chaîne ou un Symbol, utilisé pour identifier les données ou la méthode fournies.
  • value: les données ou la méthode à fournir, pouvant être une valeur de n'importe quel type, y compris des objets, des fonctions, etc.

3. Comment l'utiliserapp.provide()？

3.1 Fournir des données ou des méthodes au niveau supérieur de l'application

Tout d'abord, nous devons l'utiliser au niveau supérieur de l'applicationapp.provide()pour fournir des données ou des méthodes. Généralement dansmain.jsDans le fichier, la configuration est effectuée :

Exemple

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Fournir des données globales
app.provide('message', 'Hello, Vue3!')

// Fournir une méthode globale
app.provide('logMessage', (msg) => {
  console.log(msg)
})

app.mount('#app')

Dans le code ci-dessus, nous utilisonsapp.provide()pour fournir une chaîne'Hello, Vue3!'et une méthodelogMessage。

3.2 Utilisation dans les composants enfantsinjectObtenir des données ou des méthodes

Dans les composants enfants, nous pouvons utiliserinjectpour obtenir les données ou méthodes fournies au niveau supérieur de l'application. Par exemple :

Exemple

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="log">Cliquez-moi</button>
  </div>
</template>

<script>
export default {
  inject: ['message', 'logMessage'],
  methods: {
    log() {
      this.logMessage('Le bouton a été cliqué !')
    }
  }
}
</script>

Dans ce composant, nous, viainjectobtenumessageetlogMessage, et les utilisons dans le template et les méthodes.

4. Exemple d'application pratique

Supposons que nous développions un système de gestion des utilisateurs et que nous devions partager les informations de l'utilisateur actuel entre plusieurs composants. Nous pouvons utiliserapp.provide()pour fournir les informations de l'utilisateur et les récupérer et les utiliser dans les composants qui en ont besoin.

4.1 Fournir les informations de l'utilisateur au niveau supérieur de l'application

Exemple

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Fournir les informations de l'utilisateur actuel
app.provide('currentUser', {
  name: 'Zhang San',
  age: 25,
  email: '[email protected]'
})

app.mount('#app')

4.2 Utiliser les informations de l'utilisateur dans les composants enfants

Exemple

<template>
  <div>
    <h1>Informations de l'utilisateur</h1>
    <p>Nom: {{ user.name }}</p>
    <p>Âge: {{ user.age }}</p>
    <p>E-mail: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  inject: ['currentUser'],
  calculé: {
    user() {
      return this.currentUser
    }
  }
}
</script>

De cette façon, nous pouvons facilement partager et utiliser les informations de l'utilisateur à travers plusieurs composants sans avoir à les transmettre via les props à chaque fois.

Autres extensions