Wenden Sie eine globale Variable auf Vuejs an

Ich habe eine Javascript-Variable, die ich bei der Instanziierung global an Vue-Komponenten übergeben möchte, sodass entweder jede registrierte Komponente sie als Eigenschaft hat oder global darauf zugegriffen werden kann.

Hinweis :: Ich muss diese globale Variable für vuejs als READ ONLY- Eigenschaft festlegen

Sie können ein globales Mixin verwenden , um jede Vue-Instanz zu beeinflussen. Sie können diesem Mixin Daten hinzufügen, um allen vue-Komponenten einen Wert / Werte zur Verfügung zu stellen.

Um diesen Wert schreibgeschützt zu machen, können Sie die in dieser Stackoveflow-Antwort beschriebene Methode verwenden .

Hier ist ein Beispiel:

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

Nur Hinzufügen von Instanzeigenschaften

Beispielsweise können alle Komponenten auf einen globalen appNameCode zugreifen . Sie schreiben nur einen Zeilencode:

Vue.prototype.$appName = 'My App'

$ ist keine Zauberei, sondern eine Konvention, die Vue für Eigenschaften verwendet, die allen Instanzen zur Verfügung stehen.

Alternativ können Sie ein Plugin schreiben , das alle globalen Methoden oder Eigenschaften enthält.

Sie können mixin verwenden und var in so etwas ändern.

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

Mit Vuex können Sie alle Ihre globalen Daten verarbeiten

Wenn die globale Variable von nichts, einschließlich Vuejs, beschrieben werden soll, können Sie Object.freezeIhr Objekt einfrieren. Durch Hinzufügen zu Vues Ansichtsmodell wird es nicht freigegeben. Eine andere Möglichkeit besteht darin, Vuejs eine eingefrorene Kopie des Objekts zur Verfügung zu stellen, wenn das Objekt global geschrieben werden soll, jedoch nicht von Vue:var frozenCopy = Object.freeze(Object.assign({}, globalObject))

In VueJS 3 mit createApp () können Sie verwenden app.config.globalProperties

So was:

const app = createApp(App);

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

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

und rufen Sie Ihre Variable folgendermaßen auf:

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

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

Wenn Ihre Daten reaktiv sind, möchten Sie möglicherweise VueX verwenden.

Eine Möglichkeit besteht darin, die Variable in der index.html zu deklarieren, da sie wirklich global ist. Es kann eine Javascript-Methode hinzugefügt werden, um den Wert der Variablen zurückzugeben, und sie wird NUR LESEN. Das hat mir gefallen:

Angenommen, ich habe 2 globale Variablen (var1 und var2). Fügen Sie dem Index.html-Header einfach diesen Code hinzu:

  <script>
      function getVar1() {
          return 123;
      }
      function getVar2() {
          return 456;
      }
      function getGlobal(varName) {
          switch (varName) {
              case 'var1': return 123;
              case 'var2': return 456;
              // ...
              default: return 'unknown'
          }
      }
  </script>

Es ist möglich, für jede Variable eine Methode zu erstellen oder eine einzelne Methode mit einem Parameter zu verwenden.

Diese Lösung funktioniert zwischen verschiedenen Vuejs-Mixins, es ist ein wirklich globaler Wert.

In Ihrer Datei main.js müssen Sie Vue folgendermaßen importieren:

import Vue from 'vue'

Dann müssen Sie Ihre globale Variable in der Datei main.js wie folgt deklarieren:

Vue.prototype.$actionButton = 'Not Approved'

Wenn Sie den Wert der globalen Variablen von einer anderen Komponente aus ändern möchten, können Sie dies folgendermaßen tun:

Vue.prototype.$actionButton = 'approved'