Vue.js 3 系で globalProperties を使ってグローバルなプロパティを定義する

こんにちは！kossyです！

さて、今回はVue.js 3 系で globalProperties を使ってグローバルなプロパティを定義する方法について、
ブログに残してみたいと思います。

環境

vue/cli 4.5.9
vue 3.0.4
node 14.15.0
npm 6.14.8

方法

Vue.js 3系では、従来の「Vue.prototype」の代わりに、config.globalPropertiesを使ってVueインスタンスにプロパティを追加できます。

以下は簡単な例です。

// src/plugins/sample-plugin.ts

import { App } from 'vue'

export const samplePlugin = {
  install: (app: App) => {
    const isSample = true;
    app.config.globalProperties.$isSample = isSample
    app.provide('$isSample', isSample)
  }
}

samplePlugin関数をmain.tsでimportし、use関数の引数に渡します。

// import { samplePlugin } from '@/plugins/sample-plugin'

const app = createApp(App)

app.use(samplePlugin)

samplePlugin関数の中身の処理は、isSampleという値をapp.config.globalProperties.$isSampleに代入し、provideメソッドを用いてグローバルプロパティとして外部から呼び出せるようにしています。
そしてuse関数を用いてsamplePluginを読み込むようにしています。

呼び出す際には、injectメソッドを用います。

const isSample = inject<boolean>('$isSample')

injectメソッドにグローバルプロパティ名を渡すことで、外部から使うことが可能になります。

勉強になりました。

大いに参考にさせていただいたサイト