web-dev-qa-db-fra.com

Appliquer la variable globale à Vuejs

J'ai une variable javascript que je souhaite transmettre globalement à Vue composants lors de l'instanciation, de sorte que chaque composant enregistré la possède en tant que propriété ou que l'on peut y accéder de manière globale.

Note :: Je dois définir cette variable globale pour vuejs comme une propriété READ ONLY

vue-componentvue.jsvuejs2
46
Kendall

Vous pouvez utiliser un Global Mixin pour affecter chaque instance Vue. Vous pouvez ajouter des données à ce mixin, rendant une/des valeur (s) disponible (s) pour tous les composants vue.

Pour que cette valeur soit en lecture seule, vous pouvez utiliser la méthode décrite dans cette réponse stackoveflow .

Voici un exemple:

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

Juste Ajout de propriétés d'instance

Par exemple, tous les composants peuvent accéder à un nom global appName, il vous suffit d'écrire un code de ligne:

Vue.prototype.$appName = 'My App'

$ n'est pas magique, c'est une convention que Vue utilise pour les propriétés disponibles pour toutes les instances.

Alternativement, vous pouvez écrire un plugin qui inclut toutes les méthodes ou propriétés globales.

65
user2276686

Vous pouvez utiliser mixin et changer var dans quelque chose comme ceci.

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

Si la variable globale ne doit pas être écrite, y compris Vuejs, vous pouvez utiliser Object.freeze pour geler votre objet. L'ajouter au modèle de vue de Vue ne le débloquera pas. Une autre option consiste à fournir à Vuejs une copie gelée de l'objet, si celui-ci est destiné à être écrit globalement, mais pas par Vue: var frozenCopy = Object.freeze(Object.assign({}, globalObject))

1
wensveen