Wenden Sie eine globale Variable auf Vuejs an

78

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

Kendall ARNEAUD
quelle

Antworten:

96

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>

asemahle
quelle
1
Verwenden Sie im JS-Code einer untergeordneten Komponente Folgendes this.globalReadOnlyProperty.
Hill
Wow, du hast meinen Speck wirklich gerettet! Ich schulde dir viel Zeit! Im Ernst, das ist großartig
Tanner Babcock
96

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.

user2276686
quelle
6
wo soll man es definieren?
Abdul-Elah JS
2
aber ich kann seinen Wert nicht innerhalb der Datenfunktion erhalten. Wie kann ich es tun? Ich habe meine Variable so eingestellt, sie liest sich bei anderen Methoden gut, Daten jedoch nicht.
Marco
Wichtig: Möglicherweise gibt es Daten / Dienstprogramme, die Sie in vielen Komponenten verwenden möchten, aber Sie möchten den globalen Bereich nicht verschmutzen.
Glats
Wenn Sie dies irgendwann this.$appName = 'Changed'ändern, bemerken die anderen Komponenten diese Änderung nicht. Wie ändern Sie diese globale Variable?
Frank
in der v-for-Schleife wird 'undefined' angezeigt
Muhammad Shahzad
3

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>

Amin
quelle
5
Hallo, es ändert sich nicht
Harmonius cool
@harmoniuscool würde sich nicht ändern, da für jede Komponente die Daten neu erstellt werden, deshalb data:ist eine Funktion. Das obige Beispiel von @amin liefert also eine Kopie des globalen Werts, und sein Beispiel zeigt auch nicht, dass er geändert werden könnte. Wenn Sie veränderbare globale Variablen und Status möchten, sollten Sie Vuex wirklich verwenden.
Dave Goodchild
3

Mit Vuex können Sie alle Ihre globalen Daten verarbeiten

Muhammad Elbadawy
quelle
2

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

wensveen
quelle
1

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.

Quentin C.
quelle
0

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.

Derzu
quelle
-1

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'
Bulbul Sarker
quelle