第22回 Vue.js入門グローバルミックスイン

こんにちは、コンスキです。

今回は、前回のミックスインに引き続き、グローバルミックスインというものについて説明します。

グローバルミックスインとは
設定方法
グローバルミックスインが適用されていることを確認
まとめ

グローバルミックスインとは

グローバルミックスインとは、すべてのVueインスタンスで共通して使用できるミックスインのことです。

前回のミックスインは、コンポーネントごとのmixinsプロパティに配列の要素としてミックスインを設定していました。

この設定の仕方では、同じミックスインを複数のコンポーネントに設定したいときに、mixinsプロパティに設定する方法をコンポーネントの数だけ行う必要があります。

少ない数であればいいのですが、作ったコンポーネントすべてに同じミックスインを使いたいときには、ミックスインの設定だけで非常に大変な作業になってしまいます。

そんなときに使える、一度設定しておけばすべてのコンポーネントに自動的に適用されるミックスインがあり、それをグローバルミックスインと呼びます。

設定方法

グローバルミックスインを設定するには次のようなコードを書きます。

Vue.mixin({
  //ここにすべてのコンポーネントで共通して使いたいプロパティを設定します
})

これだけでコンポーネントの設定に何も書かなくても、このミックスインに設定されたプロパティがすべてのコンポーネントのプロパティに強制的に追加されます。

グローバルミックスインが適用されていることを確認

グローバルミックスインの設定の方法は分かっていただけたかもしれませんが、グローバルミックスインで設定したプロパティがどのようにコンポーネントに追加されているのか分かりづらいと思います。

そこで、次のようにcreatedフック関数に処理を設定しておき、その処理がどのように実行されるのかを確認してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>グローバルミックスイン</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <component1></component1>
    <component2></component2>
  </div>
  <script>
    Vue.mixin({
      created: function () {
        console.log(this.name + "のcreatedフック関数が実行されました")
      }
    })
    Vue.component ("component1", {
      template: `
        <div>コンポーネント１</div>
      `,
      data: function () {
        return {
          name: "コンポーネント１"
        }
      }
    })
    Vue.component ("component2", {
      template: `
        <div>コンポーネント２</div>
      `,
      data: function () {
        return {
          name: "コンポーネント２"
        }
      }
    })
    var vm = new Vue({
      el: "#app",
      data: {
        name: "Vueインスタンス"
      }
    })
  </script>
</body>
</html>

上のコードをブラウザに表示するとグローバルミックスインに設定したcreatedフック関数は何回実行されるでしょうか？

Chrome DevToolsのコンソールから確認すると、次のように表示されます。