よく用いられるグローバル変数の定義方法とその課題

vue.prototypeで定義する
- 公式でも推奨されている
- 課題
  - グローバル変数でバインドできない
    - ある子コンポーネントで行った変更を、別コンポーネントに即時反映したい

この記事で解決できること

vue.prototypeを使わずに、グローバル変数でコンポーネント同士を動的にバインドする

サンプルアプリ画面

Block1で変更したメッセージが、Block2にも同期して反映される
- メッセージはグローバル変数でバインドしています

フォルダ構成

├── main.js ・・・ここでグローバル変数を定義
├── App.vue
└─┬ components
　 ├── Block1.vue ・・・グローバル変数を参照
　└── Block2.vue ・・・グローバル変数を参照

サンプルアプリでは、main.jsでグローバル変数を定義し、各コンポーネントで参照しています。
- 下記で順に説明します。

グローバル変数を定義する（main.js）

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 1. グローバル変数を定義する
let GlobalData = new Vue({
  data: {
    $msg: "No comment.", // グローバル変数
  }
});

// 2. mixin でグローバル変数をラッピングする
Vue.mixin({
  methods: {
    // 2-1. 各コンポーネント内の<script>タグ内でグローバル変数を参照するための関数
    $_msg(){
      return GlobalData.$data.$msg
    },
    $_setMsg(newMsg){
      GlobalData.$data.$msg = newMsg;
    }
  },
  computed: {
    // 2-2. 各コンポーネント内の<template>タグ内でグローバル変数を参照するための処置
    $msg: {
      get: function () { return GlobalData.$data.$msg },
      set: function (newMsg) { GlobalData.$data.$msg = newMsg; }
    }
  }
})

// 3. 通常通りコンポーネントを生成する
new Vue({
  render: h => h(App),
}).$mount('#app')

補足説明
- 1. グローバル変数を定義する
  - new Vue()メソッドを使ってvueインスタンスを生成します。data属性にグローバル変数を定義します。この例では、$msgがグローバル変数に相当します。
- 1. mixin でグローバル変数をラッピングする
  - 2-1. 各コンポーネント内の<script>タグ内でグローバル変数を参照するための関数
    - methods属性で、グローバル変数のゲッター、セッターを定義します。これがないと各コンポーネントの<script>タグ内で、グローバル変数を参照できません。
  - 2-2. 各コンポーネント内の<template>タグ内でグローバル変数を参照するための処置
    - computed属性を定義し、ゲッター、セッターを定義します。これがないと各コンポーネントの<template>タグ内で、グローバル変数を参照できません。
- 1. 通常通りコンポーネントを生成する

各コンポーネントでグローバル変数を参照する

components/Block1.vue を例にご説明します
- フォルダ構成はこちら

components/Block1.vue

<template>
  <div id="block1-root" @click="setMessage">
    <p>Block1</p>
    <!-- (A) <template>タグ内でグローバル変数を参照 -->
    <p>メッセージ: {{$msg}}</p>
  </div>
</template>


<script>
export default {
  components: {
  },
  data: function () {
    return {
    }
  },
  methods: {
    setMessage(){
      // (B) <script>タグでグローバル変数の参照・書き換え
      this.$_setMsg("Block1がクリックされました！");
    }
  },
  mounted: function(){
  }
}
</script>


<style scoped lang="scss">
 // 省略
</style>

補足説明
- (A) <template>タグ内で変数を利用する場合は、main.js内のcomputed属性で定義した変数名を記述します。
  - この例では、{{$msg}} です。
- (B) <script>タグ内で変数を利用する場合は、main.js内のmethods属性で定義した関数を呼び出します。
  - この例では、 this.$_setMsg() です。

その他の手法

イベントバスを作成し、カスタムイベントをグローバルスコープにemitすることもできます
- 参考URL: How To Create a Global Event Bus in Vue 2

参考記事

この記事は、[こちらのStackOverflow](// https://stackoverflow.com/questions/49256765/change-vue-prototype-variable-in-all-components) の記事を参考にまとめました。