Last-Modified: 2022/06/08

Vue.jsでグローバル変数を使う方法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsでグローバル変数を使う方法について、簡単に解説していきます。

CDN版

Vue.jsでグローバル変数を使う方法はいくつかあります。

CDN版では難しいことはなく、通常のJavaScriptと同じです。

var hoge = 'hoge';
var isHoge = false;

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      hoge: hoge,
      isHoge: isHoge
    }
  }
});

上記のように、Vueインスタンスの外に定義したものは、そのまま同じ名前でVueインスタンス内でも使えます。

モジュールをimport

以下のようなグローバル変数用のVueファイルを作ります。

var hoge = 'hoge';
var isHoge = false;
export default {
    hoge,  
    isHoge
}

Global.vueを作成したとすれば、他ファイルで以下のようにimportを行います。

import global from '../../components/Global'
export default {
  data: function() {
    return {
      hoge: global.hoge,
      isHoge: global.isHoge
    }
  }
}

上記のようにすることで、例えば、global.グローバル変数用モジュール内のプロパティ名でアクセスできます。

Vue.prototypeにマウント

グローバル変数用モジュールをいちいちimportすることは面倒です。

import global from '../../components/Global'
Vue.prototype.$global = global

その場合には、上記のようにmain.jsでVue.prototypeにマウントしましょう。

export default {
  data: function() {
    return {
      hoge: this.$global.hoge,
      isHoge: this.$global.isHoge
    }
  }
}

マウントすることで、上記のように、例えば、this.$global.グローバル変数用モジュール内のプロパティ名でどのファイルからもアクセスすることが可能です。

• facebook
• Tweet
• Read Later