web-dev-qa-db-ja.com

グローバル変数をVuejsに適用する

インスタンス化時にVueコンポーネントにグローバルに渡したいjavascript変数があるため、登録された各コンポーネントがプロパティとして持っているか、グローバルにアクセスできます。

注:: vuejsのこのグローバル変数をREAD ONLYプロパティとして設定する必要があります

vue-componentvue.jsvuejs2
46
Kendall

Global Mixin を使用して、すべてのVueインスタンスに影響を与えることができます。このミックスインにデータを追加して、すべてのvueコンポーネントで値を使用可能にすることができます。

その値を読み取り専用にするには、 this stackoveflow answer で説明されている方法を使用できます。

以下に例を示します。

// This is a global mixin, it is applied to every vue instance
Vue.mixin({
  data: function() {
    return {
      get globalReadOnlyProperty() {
        return "Can't change me!";
      }
    }
  }
})

Vue.component('child', {
  template: "<div>In Child: {{globalReadOnlyProperty}}</div>"
});

new Vue({
  el: '#app',
  created: function() {
    this.globalReadOnlyProperty = "This won't change it";
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalReadOnlyProperty}}
  <child></child>
</div>
64
asemahle

ただ インスタンスプロパティの追加

たとえば、すべてのコンポーネントはグローバルappNameにアクセスできます。1行のコードを記述するだけです。

Vue.prototype.$appName = 'My App'

$は魔法ではなく、すべてのインスタンスで使用可能なプロパティにVueが使用する規則です。

または、すべてのグローバルメソッドまたはプロパティを含む プラグインの作成 を使用できます。

65
user2276686

Mixinを使用して、varを次のように変更できます。

// This is a global mixin, it is applied to every vue instance
Vue.mixin({
  data: function() {
    return {
      globalVar:'global'
    }
  }
})

Vue.component('child', {
  template: "<div>In Child: {{globalVar}}</div>"
});

new Vue({
  el: '#app',
  created: function() {
    this.globalVar = "It's will change global var";
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalVar}}
  <child></child>
</div>
2
Amin

グローバル変数にVuejsを含む何も書き込まない場合、Object.freezeを使用してオブジェクトをフリーズできます。 Vueのビューモデルに追加しても、フリーズ解除されません。別のオプションは、オブジェクトがグローバルに書き込まれることを意図している場合に、VueにオブジェクトのフリーズコピーをVuejsに提供することです：var frozenCopy = Object.freeze(Object.assign({}, globalObject))

1
wensveen