So erhalten Sie externe Daten in Vue

Vue ist ein sehr beliebtes JavaScript-Framework, mit dem wir elegante, reaktionsfähige Weboberflächen erstellen können. Wenn wir Vue in unserer Anwendung verwenden, müssen wir Daten an die Vorlage binden, was uns ermöglicht, DOM-Elemente zu aktualisieren, ohne die Seite zu aktualisieren. In diesem Artikel soll erläutert werden, wie Vue mit externen Daten umgeht.

Vue bietet ein Konzept namens „Komponenten“, das es uns ermöglicht, wiederverwendbare Codeblöcke in unseren Anwendungen zu kombinieren. Jede Komponente verfügt über eigene Daten und Verhaltensweisen und kann problemlos mit anderen Komponenten interagieren. Was machen wir also, wenn sich unsere Daten nicht in der Komponente befinden?

Vue bietet zwei Hauptmethoden für den Umgang mit externen Daten: Prop und Vuex.

1. Prop

Prop ist eine Möglichkeit, Daten zwischen Komponenten in Vue zu übertragen. Es ermöglicht uns, Daten von übergeordneten Komponenten an untergeordnete Komponenten weiterzugeben. Untergeordnete Komponenten können diese Daten als eigene Eigenschaften verwenden und sie bei Bedarf aktualisieren.

Bei der Verwendung von Prop müssen wir die Daten deklarieren, die wir in der Komponente empfangen müssen. Dies kann durch Hinzufügen von Props-Attributen zur Komponente erreicht werden. Hier ist ein Beispiel für den Empfang einer Prop mit dem Namen „message“:

Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

Wir können Daten an diese Komponente übergeben, wo immer sie verwendet wird, zum Beispiel:

<my-component message="Hello, world!"></my-component>

Die Komponente sieht diese Nachrichteneigenschaft und kann sie verwenden, um alle erforderlichen Nachrichten anzuzeigen.

2. Vuex

Vuex ist die offizielle Zustandsverwaltungsbibliothek für Vue, die es uns ermöglicht, Daten in der gesamten Anwendung zu teilen. Vuex verwendet ein zentrales Repository namens „Store“, um den Status Ihrer Anwendung zu speichern. Komponenten können den Status aus dem Store abrufen und aktualisieren.

Bei der Verwendung von Vuex müssen wir zuerst einen Shop definieren. Dies kann erreicht werden, indem ein Objekt erstellt wird, das den Anwendungsstatus und den Aktualisierungsstatus enthält. Hier ist ein einfaches Beispiel:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Wenn wir Vuex in einer Komponente verwenden, müssen wir zuerst den Store importieren. Dies kann erreicht werden, indem der Komponente Folgendes hinzugefügt wird:

import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}

Wir können berechnete Eigenschaften verwenden, um den Status aus dem Speicher abzurufen, zum Beispiel:

<p>Count: {{ count }}</p>

Wir können auch Methoden verwenden, um den Status zu aktualisieren, zum Beispiel:

<button v-on:click="increment">Increment</button>

Wenn auf die Schaltfläche geklickt wird, wird durch den Aufruf der Inkrementierungsmethode der Status aktualisiert.

Zusammenfassend bietet Vue zwei Hauptmethoden für den Umgang mit externen Daten: Prop und Vuex. Mithilfe von Requisiten können wir Daten von übergeordneten Komponenten an untergeordnete Komponenten übergeben und diese bei Bedarf aktualisieren. Vuex ermöglicht es uns, Daten in der gesamten Anwendung zu teilen und sie überall zu aktualisieren. Abhängig vom konkreten Anwendungsszenario können wir die geeignete Art der Verarbeitung externer Daten wählen.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie externe Daten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!