Appliquer une variable globale à Vuejs

Question

J'ai une variable javascript que je veux transmettre globalement aux composants Vue lors de l'instanciation. Ainsi, soit chaque composant enregistré l'a comme propriété, soit on peut y accéder globalement.

Note: : J'ai besoin de définir cette variable globale pour vuejs en tant que LIRE SEULEMENT propriété

Answer 1

Juste Ajout des propriétés de l'instance

Par exemple, tous les composants peuvent accéder à un appName vous n'avez qu'à écrire une ligne de code :

Vue.prototype.$appName = 'My App'

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

Vous pouvez également écrire un plugin qui inclut toutes les méthodes ou propriétés globales.

Answer 2

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

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

Voici un exemple :

// This is a global mixin, it is applied to every vue instance. 
// Mixins must be instantiated *before* your call to new Vue(...)
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 3

Dans VueJS 3 avec createApp() vous pouvez utiliser app.config.globalProperties

Comme ça :

const app = createApp(App);

app.config.globalProperties.foo = 'bar';

app.use(store).use(router).mount('#app');

et appelez votre variable comme ceci :

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})

doc : https://v3.vuejs.org/api/application-config.html#warnhandler

Si vos données sont réactives, vous pouvez utiliser VueX.

Answer 4

Vous pouvez utiliser un 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>

Answer 5

Si la variable globale ne doit pas être écrite par quoi que ce soit, y compris Vuejs, vous pouvez utiliser Object.freeze pour figer votre objet. L'ajouter au viewmodel de Vue ne le dégèlera pas. Une autre option consiste à fournir à Vuejs une copie figée de l'objet, si l'objet est destiné à être écrit globalement mais pas par Vue : var frozenCopy = Object.freeze(Object.assign({}, globalObject))