Свойство app.config.globalProperties в Vue3

Vue3 全局 APIГлобальный API Vue3

app.config.globalPropertiesявляется элементом конфигурации экземпляра приложения Vue, который позволяет нам добавлять некоторые пользовательские свойства или методы глобально. Эти свойства или методы можно напрямую использовать в любом компоненте приложения черезthisдоступ.

Как использовать globalProperties?

1. Создайте экземпляр приложения Vue

Сначала нам нужно создать экземпляр приложения Vue, а затем черезapp.config.globalPropertiesчтобы добавить глобальные свойства или методы.

Пример

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

const app = createApp(App);

2. Добавьте глобальные свойства или методы

Мы можем использоватьapp.config.globalPropertiesчтобы добавить глобальные свойства или методы. Например, мы добавляем глобальный метод$greet：

Пример

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

app.mount('#app');

3. Используйте глобальные свойства или методы в компонентах

После того как мы добавили глобальный метод$greet, мы можем в любом компоненте черезthisнапрямую вызвать его:

Пример

<template>
  <button @click="sayHello">Скажи привет</button>
</template>

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

При нажатии кнопки в консоль будет выведеноHello, Vue Developer!。

Сценарии применения globalProperties

1. Глобальные вспомогательные методы

globalPropertiesОн отлично подходит для определения некоторых глобальных вспомогательных методов. Например, мы можем определить глобальный метод форматирования даты:

Пример

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

Затем этот метод можно использовать в любом компоненте:

Пример

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

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

2. Глобальные параметры конфигурации

Мы также можем использоватьglobalPropertiesдля определения некоторых глобальных параметров конфигурации. Например, мы можем определить глобальный URL API:

Пример

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

Затем используйте этот параметр в компонентах:

Пример

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

3. Расширение плагина

При разработке плагинов Vue,globalPropertiesтакже является очень часто используемым инструментом. Через него плагины могут добавлять некоторые методы или свойства глобально, тем самым упрощая использование плагина.

Например, мы можем разработать простой плагин логирования:

Пример

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

app.use(Logger);

Затем используйте этот метод логирования в компонентах:

Пример

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

Меры предосторожности

  1. Конфликт имен: ПосколькуglobalPropertiesявляется глобальным, поэтому будьте осторожны при именовании, чтобы избежать конфликтов с методами или свойствами других библиотек или плагинов.
  2. Безопасность типов: Если вы используете TypeScript, вам может потребоватьсяglobalPropertiesдобавить определения типов, чтобы обеспечить безопасность типов.

Vue3 全局 APIГлобальный API Vue3

Другие расширения