Propriété app.config.globalProperties de Vue3

Vue3 全局 APIVue3 API globale

app.config.globalPropertiesest un élément de configuration de l'instance d'application Vue qui nous permet d'ajouter des propriétés ou méthodes personnalisées globalement. Ces propriétés ou méthodes sont directement accessibles dans n'importe quel composant de l'application viathisaccès.

Comment utiliser globalProperties ?

1. Créer une instance d'application Vue

Tout d'abord, nous devons créer une instance d'application Vue, puis viaapp.config.globalPropertiespour ajouter des propriétés ou méthodes globales.

Exemple

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

const app = createApp(App);

2. Ajouter des propriétés ou méthodes globales

ما می‌توانیم استفاده کنیمapp.config.globalPropertiespour ajouter des propriétés ou méthodes globales. Par exemple, nous ajoutons une méthode globale$greet：

Exemple

app.config.globalProperties.$greet = function(name) {
  console.log(`Hello, ${name}!`);
};

app.mount('#app');

3. Utiliser des propriétés ou méthodes globales dans les composants

Une fois que nous avons ajouté une méthode globale$greet, nous pouvons dans n'importe quel composant viathisl'appeler directement :

Exemple

<template>
  <button @click="sayHello">Dire Bonjour</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      this.$greet('Vue Developer');
    }
  }
}
</script>

Lorsque le bouton est cliqué, la console afficheraHello, Vue Developer!。

Scénarios d'application de globalProperties

1. Méthodes utilitaires globales

globalPropertiesC'est très approprié pour définir certaines méthodes utilitaires globales. Par exemple, nous pouvons définir une méthode globale de formatage de date :

Exemple

app.config.globalProperties.$formatDate = function(date) {
  return new Date(date).toLocaleDateString();
};

Ensuite, cette méthode peut être utilisée dans n'importe quel composant :

Exemple

<template>
  <div>{{ formattedDate }}</div>
</template>

<script>
export default {
  data() {
    return {
      date: '2025-03-10'
    };
  },
  computed: {
    formattedDate() {
      return this.$formatDate(this.date);
    }
  }
}
</script>

2. Paramètres de configuration globaux

Nous pouvons également utiliserglobalPropertiespour définir certains paramètres de configuration globaux. Par exemple, nous pouvons définir une URL d'API globale :

Exemple

app.config.globalProperties.$apiUrl = 'https://api.example.com';

Ensuite, utilisez ce paramètre dans les composants :

Exemple

<script>
export default {
  created() {
    console.log('API URL:', this.$apiUrl);
  }
}
</script>

3. Extension de plugin

Lors du développement de plugins Vue,globalPropertiesest également un outil très couramment utilisé. Grâce à lui, les plugins peuvent ajouter certaines méthodes ou propriétés globalement, ce qui simplifie l'utilisation du plugin.

Par exemple, nous pouvons développer un plugin de journalisation simple :

Exemple

const Logger = {
  install(app) {
    app.config.globalProperties.$log = function(message) {
      console.log(`[LOG]: ${message}`);
    };
  }
};

app.use(Logger);

Ensuite, utilisez cette méthode de journalisation dans les composants :

Exemple

<script>
export default {
  mounted() {
    this.$log('Component is mounted!');
  }
}
</script>

Précautions

  1. Conflit de nommage: Étant donné queglobalPropertiesest global, donc soyez prudent lors du nommage afin d'éviter les conflits avec les méthodes ou propriétés d'autres bibliothèques ou plugins.
  2. Sécurité des types: Si vous utilisez TypeScript, vous devrez peut-êtreglobalPropertiesajouter des définitions de types pour garantir la sécurité des types.

Vue3 全局 APIVue3 API globale

Autres extensions