Vue3 app.config.globalProperties プロパティ

Vue3 全局 APIVue3 グローバル API

app.config.globalPropertiesは Vue アプリケーションインスタンスの設定項目の 1 つで、グローバルにカスタムプロパティやメソッドを追加できます。これらのプロパティやメソッドは、アプリケーションの任意のコンポーネントで直接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">Say Hello</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グローバルな設定パラメータを定義できます。例えば、グローバルな API URL を定義できます：

例

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 全局 APIVue3 グローバル API

その他の拡張