【Vue.js】グローバル変数で複数のコンポーネントをバインドする

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

• 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) の記事を参考にまとめました。