Применить глобальную переменную к Vuejs

Question

У меня есть переменная javascript, которую я хочу передать глобально компонентам Vue при создании экземпляра, таким образом, каждый зарегистрированный компонент имеет это свойство как свойство или к нему можно получить доступ по всему миру.

Примечание :: Мне нужно установить эту глобальную переменную для vuejs как READ ONLY свойство

Answer 1

Вы можете использовать Global Mixin влиять на каждый экземпляр Vue. Вы можете добавить данные в этот 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, вы просто написать код на одну строку:

Vue.prototype.$appName = 'My App'

$ не является магии, это соглашение, которое Vue использует для свойств, доступных для всех экземпляров.

Конечно, вы можете writing a plugins, которые включают в себя все глобальные методы или свойства.