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
}

})

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

state: {

data: []

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

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.

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!