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

Question

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

注::私はREADとしてvuejsため、このグローバル変数を設定する必要がある唯一のプロパティ

Answer 1

あなたはすべてのVueのインスタンスに影響を与えるためにGlobal Mixinを使用することができます。このミックスインにデータを追加して、すべての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>

Answer 2

ちょうどAdding Instance Properties

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

は一例です Vue.prototype.$appName = 'My App'

$は、魔法ではありません。すべてのインスタンスで使用できるプロパティには、Vueが使用します。

もちろん、すべてのグローバルメソッドまたはプロパティを含むwriting a pluginsもあります。