Propiedad app.config.globalProperties de Vue3

Vue3 全局 APIAPI global de Vue3

app.config.globalPropertiesEs un elemento de configuración de la instancia de la aplicación Vue que nos permite agregar propiedades o métodos personalizados a nivel global. Estas propiedades o métodos pueden serthisaccedidos directamente en cualquier componente de la aplicación a través de `globalProperties`.

¿Cómo usar globalProperties?

1. Crear una instancia de la aplicación Vue

Primero, necesitamos crear una instancia de la aplicación Vue y luego, a través deapp.config.globalPropertiesagregamos propiedades o métodos globales.

Ejemplo

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

const app = createApp(App);

2. Agregar propiedades o métodos globales

Podemos, a través deapp.config.globalPropertiesagregar propiedades o métodos globales. Por ejemplo, agregamos un método global$greet：

Ejemplo

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

app.mount('#app');

3. Usar propiedades o métodos globales en componentes

Una vez que hayamos agregado el método global$greet, podemos en cualquier componente a través dethisllamarlo directamente:

Ejemplo

<template>
  <button @click="sayHello">Say Hello</button>
</template>

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

Al hacer clic en el botón, la consola imprimiráHello, Vue Developer!。

Escenarios de aplicación de globalProperties

1. Métodos de utilidad globales

globalPropertiesEs muy adecuado para definir métodos de utilidad globales. Por ejemplo, podemos definir un método global para formatear fechas:

Ejemplo

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

Luego, podemos usar este método en cualquier componente:

Ejemplo

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

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

2. Parámetros de configuración globales

También podemos usarglobalPropertiespara definir algunos parámetros de configuración globales. Por ejemplo, podemos definir una URL de API global:

Ejemplo

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

Luego, usamos este parámetro en el componente:

Ejemplo

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

3. Extensión de plugins

Al desarrollar plugins de Vue,globalPropertiestambién es una herramienta muy utilizada. A través de ella, los plugins pueden agregar algunos métodos o propiedades a nivel global, simplificando así su uso.

Por ejemplo, podemos desarrollar un simple plugin de registro:

Ejemplo

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

app.use(Logger);

Luego, usamos este método de registro en el componente:

Ejemplo

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

Notas

  1. Conflicto de nombres: Dado queglobalPropertieses global, se debe tener cuidado al nombrar, para evitar conflictos con métodos o propiedades de otras bibliotecas o plugins.
  2. Seguridad de tipos: Si usas TypeScript, es posible que necesitesglobalPropertiesagregar definiciones de tipos para `globalProperties`, a fin de garantizar la seguridad de tipos.

Vue3 全局 APIAPI global de Vue3

Otras extensiones