Aplicar variable global a Vuejs

Tengo una variable javascript que quiero pasar globalmente a los componentes Vue tras la instanciación, por lo que cada componente registrado lo tiene como propiedad o se puede acceder globalmente.

Nota:: Necesito establecer esta variable global para vuejs como una propiedad DE SOLO LECTURA

Author: Kendall, 2016-11-30
Source

2 answers

Puede usar un Mixin Global para afectar a cada instancia de Vue. Puede agregar datos a este mixin, haciendo que un valor/valores estén disponibles para todos los componentes de vue.

Para hacer que ese valor sea de solo lectura, puede usar el método descrito en esta respuesta de stackoveflow.

Aquí hay un ejemplo: 

// 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>
 33
Author: asemahle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:25:26

Solo Añadiendo Propiedades de Instancia

Por ejemplo, todos los componentes pueden acceder a un appName global, simplemente escribe un código de línea:

Vue.prototype.$appName = 'My App'

$ no es magia, es una convención que Vue usa para propiedades que están disponibles para todas las instancias.

Por supuesto, puedes escribir un plugin que incluya todos los métodos o propiedades globales.

 33
Author: user2276686,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-16 02:05:37