[便利] Vue でグローバル関数を作るには

こんにちは！ Vue３使っているのにコンポジションAPIが苦手なおじさんです。　野暮用がありまして、Vue３でどこからでも呼べるグローバル関数を使う方法を調べましたのでメモっておきたいと思います。
Vue2からルールが変わり、移植のときにも注意が必要なポイントです。

Vueグローバル関数の登録方法

Vue2の方法

main.jsに以下のように追加します。

// Vue2
const app = createApp({})
app.prototype.$http = () => {}

しらべるとほとんどこの方法関連が出てきますが、Vue3だとエラーになります。　あれの亜流でmixinとかpluginsとか複数のやり方が出てくるので迷いますが、Vue３時代なのに検索するとたくさん出てくるので注意が必要です。

const MyPlugin = {
  install(Vue, options) {
    Vue.prototype.globalHelper = () => {
      alert("Hello world")
    }
  },
}
Vue.use(MyPlugin)

Vue3の方法

main.jsに以下の例の要領て登録します。

// after - Vue 3
const app = createApp({})
app.config.globalProperties.$http = () => {}

これはVue3移行ガイドにも書かれていました。

Global API Application Instance | Vue 3 Migration Guide

[Vue作法]  $ prefix

Vueのルールで、prefix に $ や _ をつけるのは特別な意味があります。
$は$store, $router などでおなじみですね。

$ :  パブリック インスタンス プロパティ用
_ :  プライベート インスタンスのプロパティ用

$ プレフィックスに関しては、Vue エコシステム内でのその目的は、ユーザーに公開される特別なインスタンス プロパティです。
_ 接頭辞を使用して独自のプライベート プロパティを定義します。
どちらも、props や data プロパティなど、コンポーネント作成者が選択したプロパティ名との衝突を避けるために使用されます。

Vueに登録したグローバル関数の呼び方

テンプレートから

Vueテンプレート内からはcomponent method を呼ぶのと同じ要領で呼び出せます。

<template>
{{ $global_func("hello!") }}
</template>

関数からは　this　経由で呼び出しできます。

this.$global_func("hello!");

Global 関数の好みについて

諸説ありますが以下のような意見が一般的です。

純粋なグローバル関数を作成することには 1 つの欠点があります。
それは、「名前空間を汚染する」ことになるということです。つまり、プログラムの特定の部分に特定の関連性があるにもかかわらず、どこからでもアクセスできる関数がすべて存在することになります。
賢明な名前が付けられた適切に作成された汎用関数を備えた中規模のアプリケーションの場合、これはおそらく問題ではありません。

ｊｓの場合は同名で上書きしてもエラーにならないので、プロジェクトのドキュメントに明記して周知することが大切です。また、チームでGlobalsの管理をする人を決めるのも良いやり方だと思います。

複雑な名前にすると全体で使う関数が冗長になり作業効率が犠牲になるので、チームで方針を決めて周知することが重要です。

今回はサイトを国際化するために、すべての場所で使う関数を登録しました。何か一定の変換をするには便利な機能です。

おまけ：

Globals Properties でダークモードの制御例の動画を見つけました。動画はわかりやすくてよいですね！

同じ方が為替フィルターをグローバルで使う便利例を解説しています。こりゃ便利！