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

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

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

Ответ 1

Вы можете использовать Global Mixin для воздействия на каждый экземпляр Vue. Вы можете добавить данные в этот mixin, сделав значение/значения доступными для всех компонентов vue.

Чтобы сделать это значение "Только для чтения", вы можете использовать метод, описанный в этом ответе stackoveflow.

Вот пример:

// 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>

Ответ 2

Просто добавление свойств экземпляра

Например, все компоненты могут обращаться к глобальному appName, вы просто пишете однострочный код:

Vue.prototype.$appName = 'My App'

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

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

Ответ 3

Вы можете использовать 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 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>

Ответ 4

Если глобальная переменная не должна быть записана ничем, включая Vuejs, вы можете использовать Object.freeze, чтобы заморозить ваш объект. Добавление его в Vue viewmodel не разморозит его. Другой вариант - предоставить Vuejs замороженную копию объекта, если объект предназначен для глобальной записи, а не для Vue: var frozenCopy = Object.freeze(Object.assign({}, globalObject))