Wie stellt Vue die von der Schnittstelle erhaltenen Daten in Vuex ein?

Vue ist ein beliebtes JavaScript-Framework, das Entwicklern beim Erstellen interaktiver und dynamischer Webanwendungen hilft. Vue wird weithin für seine Benutzerfreundlichkeit und Flexibilität geschätzt. Vue hilft auch bei der Verwaltung des Datenstatus Ihrer Anwendung, indem es ein Plugin namens Vuex bereitstellt. Vuex ist ein Zustandsverwaltungsmuster, das alle Anwendungszustände an einem Ort zentralisiert, um deren Synchronisierung zwischen verschiedenen Teilen zu verwalten und sicherzustellen.

Bei der Entwicklung einer Webanwendung mit Vue müssen Sie normalerweise Daten vom Server abrufen, um die Ansicht zu rendern. Diese Daten können über HTTP-Anfragen von der API abgerufen und dann in Vue-Komponenten verwendet werden. In diesem Fall kann Vuex uns dabei helfen, den Datenstatus zu zentralisieren, sodass er in der gesamten Anwendung gemeinsam genutzt werden kann.

In diesem Artikel stellen wir vor, wie man die von der API erhaltenen Daten in Vuex einfügt. Wir werden die folgenden Schritte verwenden:

1. Vuex-Speicher erstellen
2. Holen Sie sich die API-Daten und speichern Sie sie in Vuex
3. im Vue Komponente Gespeicherte Daten verwenden in

Vuex-Speicher erstellen

Um Vuex zum Speichern von Daten zu verwenden, müssen wir eine store.js-Datei erstellen. In der Datei store.js müssen wir zunächst Vue und Vuex importieren. Dann müssen wir Vue.use(Vuex) verwenden, um das Vuex-Plugin zu registrieren.

Vue aus 'vue' importieren
Vuex aus 'vuex' importieren

Vue.use(Vuex)

in store.js In der Datei erstellen wir eine Vuex-Speicherinstanz, die den Status enthält, den wir teilen möchten.

export const store = new Vuex.Store({
state: {

data: []

},
mutations: {

setData(state, payload) {
  state.data = payload
}

#🎜 🎜#}

})

Im obigen Code definieren wir einen Zustand namens data und stellen in Mutationen eine Methode namens setData bereit, die zum Speichern von Daten im Datenzustand verwendet wird.

Als nächstes müssen wir die Store-Instanz exportieren, um sie in der Vue-Komponente verwenden zu können.

API-Daten abrufen und in Vuex speichern

In Vue-Komponenten können wir Axios oder andere HTTP-Bibliotheken verwenden, um Daten von der API abzurufen. In diesem Artikel verwenden wir Axios, um Daten abzurufen.

Um die Daten abzurufen und in Vuex zu speichern, müssen wir die Actions-Methode in der Vue-Komponente aufrufen. In der Datei „store.js“ stellen wir eine Aktionsmethode bereit, die die Daten empfängt und die in Mutationen definierte setData-Methode aufruft, um sie im Datenstatus zu speichern.

Das Folgende ist der vollständige Code in der Datei store.js:

Vue aus 'vue' importieren

Vuex aus 'vuex' importieren
importieren axios from 'axios'

Vue.use(Vuex)

export const store = new Vuex.Store({

state: {

data: []

# 🎜🎜 #},

Mutationen: {

setData(state, payload) {
  state.data = payload
}

},

Aktionen: {

getData({commit}) {
  axios.get('https://api.example.com/data')
    .then(response => {
      commit('setData', response.data)
    })
}

}

})

#🎜 🎜#Im obigen Code definieren wir eine Aktionsmethode namens getData. Diese Methode verwendet Axios, um Daten von der Adresse https://api.example.com/data abzurufen. Wenn die Erfassung erfolgreich ist, wird mit der Commit-Methode die setData-Mutationsmethode aufgerufen, um die Daten im Datenstatus zu speichern.

Verwendung gespeicherter Daten in Vue-Komponenten

Der in der Datei „store.js“ definierte Status kann in Vue-Komponenten verwendet werden. Nachfolgend finden Sie eine Beispielkomponente, die die Daten aus dem Datenstatus in der Datei „store.js“ abruft und sie in der Vorlage anzeigt.

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<ul>
  <li v-for="item in data" :key="item.id">
    {{ item.name }}
  </li>
</ul>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

#🎜🎜 #3f1c4e4b6b16bbbd69b2ee476dc4f83a

import { mapState, mapActions } from 'vuex'

export default {

berechnet: {

...mapState(['data']),

},#🎜 🎜# erstellt() {

this.getData()

},

Methoden: {

...mapActions(['getData']),

}

}

2cacc6d41bbb37262a98f745aa00fbf0#🎜 🎜#
Im obigen Code verwenden wir die von Vuex bereitgestellten Methoden „mapState“ und „mapActions“. Mithilfe von „mapState“ ordnen wir den Datenstatus den berechneten Eigenschaften der Komponente zu. Mithilfe von „mapActions“ ordnen wir die Aktionsmethode „getData“ der Methode der Komponente zu.

Wenn die Komponente erstellt wird, rufen wir die erstellte Hook-Funktion und die darin enthaltene getData-Methode auf, um die Daten in den Datenstatus in der Datei store.js zu laden. Wir können die erhaltenen Daten durch die v-for-Anweisung schleifen und in der Vorlage anzeigen.

Fazit

Der Prozess der Speicherung der von der API erhaltenen Daten in Vuex ist wie oben beschrieben. Wir können Vuex verwenden, um den Status der Anwendung zu verwalten, sodass Daten in der gesamten Anwendung gemeinsam genutzt werden können. In Vue-Komponenten können wir die Methoden „mapState“ und „mapActions“ verwenden, um auf in Vuex gespeicherte Daten und Methoden zuzugreifen.

Das obige ist der detaillierte Inhalt vonWie stellt Vue die von der Schnittstelle erhaltenen Daten in Vuex ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!