So speichern Sie Daten mit Vuex in Uniapp

Die Verwendung von vuex in uniapp kann uns dabei helfen, den Datenaustausch und die Datenverwaltung zwischen Komponenten bequemer und übersichtlicher zu gestalten. Das Speichern von Daten in Vuex ist ebenfalls eine wichtige Fähigkeit, die wir beherrschen müssen. Im Folgenden wird detailliert beschrieben, wie Sie mit vuex Daten in Uniapp speichern.

1. Status in vuex definieren

In vuex müssen wir zunächst einen Store definieren, der ein globaler Statusmanager ist, einschließlich Attributen und Methoden wie Status, Mutationen, Aktionen, Getter usw. Und der Staat ist für uns der Schlüssel zum Speichern von Daten.

In uniapp können wir eine index.js-Datei im Store-Ordner unter dem src-Verzeichnis erstellen und darin den Status definieren. Zum Beispiel:

const state = {
  username: ''
}

Hier definieren wir ein Statusobjekt, das ein Benutzernamensattribut enthält, und initialisieren es mit einer leeren Zeichenfolge. Dieser Benutzername sind die Daten, die wir in vuex speichern möchten.

2. Verwenden Sie Mutationen, um den Zustand zu ändern

Als nächstes müssen wir eine Mutation definieren. In Mutationen können wir verschiedene Vorgänge definieren, wie z. B. das Hinzufügen von Daten, das Ändern von Daten, das Löschen von Daten usw. Hier nehmen wir das Ändern von Daten als Beispiel, um zu demonstrieren, wie Daten im Status gespeichert werden.

In der Datei src/store/index.js definieren Sie die Mutationsmethode wie folgt:

const mutations = {
  setUsername (state, payload) {
    state.username = payload
  }
}

Hier definieren wir eine setUsername-Methode, die zwei Parameter empfängt: Status und Nutzlast. Der Status ist das Statusobjekt, das wir im vorherigen Schritt definiert haben, und die Nutzlast sind die geänderten Daten.

Die setUsername-Methode erreicht den Zweck, Daten im Status zu speichern, indem sie das Benutzernamenattribut im Statusobjekt ändert.

3. Vuex in Komponenten verwenden

Da wir nun die Daten in Vuex definiert und gespeichert haben, müssen wir sie in der Komponente verwenden.

In der Komponente, die wir verwenden müssen, müssen wir vuex einführen und MapState und andere Methoden verwenden, um die Daten im Status abzurufen, damit sie in der Komponente verwendet werden können.

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['username'])
  },
  mounted () {
    console.log(this.username) // 打印出保存在vuex中的数据
  }
}

Hier verwenden wir die Methode „mapState“, um die Daten in vuex der berechneten Eigenschaft in der Komponente zuzuordnen, und geben ihr einen Alias ​​als Benutzernamen, damit wir „this.username“ in der Komponente verwenden können, um die in vuex gespeicherten Daten abzurufen .

4. Ändern Sie die Daten in Vuex in der Komponente

Im vorherigen Schritt konnten wir die in Vuex gespeicherten Daten in der Komponente abrufen. Der nächste Schritt ist die Logik der Datenverarbeitung in vuex in der Komponente.

In der Komponente können wir die Methoden in Mutationen übermitteln und die Daten im Status über this.$store.commit('mutations method name', data) ändern.

methods: {
  modifyUsername () {
    this.$store.commit('setUsername', 'newUsername')
  }
}

Hier definieren wir eine Methode „modifyUsername“. Wenn wir sie in der Komponente aufrufen, können wir die Methode „setUsername“ über die Methode „this.$store.commit“ übermitteln und neue Daten „newUsername“ übergeben. Auf diese Weise können die in vuex gespeicherten Daten geändert werden.

5. Zusammenfassung

Durch die oben genannten Schritte können wir lernen, mit vuex Daten in uniapp zu speichern und zu verwalten. Die Schritte sind einfach und in der Praxis nicht schwierig. Beim Schreiben großer oder komplexer Anwendungen kann die Verwendung von vuex die Wartbarkeit und Lesbarkeit des Codes verbessern und auch den Entwicklungsprozess beschleunigen.

Das obige ist der detaillierte Inhalt vonSo speichern Sie Daten mit Vuex in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!