VUE3-Erste-Schritte-Tutorial: Verwenden von Vuex State Management zur Implementierung eines globalen Datenmanagements

Mit der kontinuierlichen Weiterentwicklung von Vue.js wurde Vue 3 auch offiziell eingeführt und nach und nach weit verbreitet. Im Vergleich zu Vue 2 verfügt Vue 3 über viele Optimierungen, z. B. die Verwendung von Proxy-Objekten als Proxy für Daten, um das Abfangen und Entführen von Daten zu erreichen. In praktischen Anwendungen wird die Verwaltung des globalen Zustands jedoch immer wichtiger, da große Anwendungsprojekte häufig aus vielen Komponenten bestehen. Derzeit ist Vuex eine sehr gute Lösung.

1. Einführung in Vuex

Vuex ist die offizielle Zustandsverwaltungsbibliothek von Vue.js, die das Problem der gemeinsamen Nutzung von Zuständen (Daten) zwischen mehreren Komponenten in Vue-Anwendungen lösen soll. Zu seinen Kernkonzepten gehören:

• Status: Daten, die global in der Anwendung verwaltet werden müssen.
• Getter (Wert-Getter): wird verwendet, um einen Zustand aus einem Zustand abzuleiten (ähnlich der berechneten Eigenschaft in einer Komponente).
• Mutation (Mutation): Wird zum Ändern der Daten im Status verwendet. Da die Vuex-Daten in der Mutation synchron aktualisiert werden, kann die Konsistenz der Daten gewährleistet werden.
• Aktion: Ähnlich wie die Mutation wird sie auch zum Ändern von Daten im Status verwendet, kann jedoch asynchron arbeiten und zum Initiieren asynchroner Vorgänge wie Netzwerkanforderungen verwendet werden.

Durch den flexiblen Einsatz dieser Kernkonzepte kann Vuex uns dabei helfen, ein globales Datenmanagement zu erreichen und so die Übertragung und den Betrieb zwischen Komponenten zu vereinfachen.

2. Vuex Store erstellen

Daten in Vuex werden im Store-Objekt gespeichert, daher müssen wir zuerst ein Store-Objekt erstellen. In Vue 3 unterscheidet sich die Art und Weise, Store-Objekte zu erstellen, geringfügig von Vue 2.

import { createStore } from 'vuex'; // 导入createStore方法

const store = createStore({
  state() {
    // 定义state对象
    return {
      count: 0
    }
  },
  mutations: {
    // 定义mutation方法
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 定义action方法
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    // 定义getter方法
    doubleCount(state) {
      return state.count * 2;
    }
  }
})

export default store; // 导出store对象

Im obigen Code haben wir über die Methode „createStore“ ein Store-Objekt erstellt und ein Objekt übergeben. Das Objekt enthält vier Attribute: Status, Mutationen, Aktionen und Getter. Unter diesen definiert das Statusattribut den Anfangswert der globalen Statusanzahl als 0; das Mutationsattribut definiert eine Mutationsmethode, die die Funktion zum Erhöhen des Zählwerts um 1 implementiert; das Aktionsattribut definiert eine Aktionsmethode, die implementiert die asynchrone Erhöhung des Zählwerts. Das Getters-Attribut definiert eine Getter-Methode doubleCount, die den doppelten Zählwert zurückgibt.

3. Vuex in Komponenten verwenden

Nachdem wir das Store-Objekt erstellt haben, können wir seine Daten und Methoden direkt in der Komponente verwenden. In Vue 3 können Sie die <script setup>-Syntax verwenden, um Daten und Methoden in Vuex zu verwenden.

<script setup>
import { useStore } from 'vuex';

const store = useStore();

function handleClick() {
  store.commit('increment');
}

</script>

<template>
  <div>
    <p>count: {{store.state.count}}</p>
    <p>double count: {{store.getters.doubleCount}}</p>
    <button @click="handleClick">increment</button>
  </div>
</template>

Im obigen Code haben wir das Store-Objekt über die Funktion useStore abgerufen und die Inkrementierungsmethode in der handleClick-Methode aufgerufen, um den Zählwert zu ändern. In der Vorlage können wir den Zählwert über store.state.count und den doppelten Zählwert über store.getters.doubleCount abrufen.

4. Zusammenfassung

Durch die Einleitung dieses Artikels können wir die grundlegenden Konzepte und die Verwendung von Vuex verstehen. Wenn die Anwendung in der tatsächlichen Entwicklung eine große Menge globaler Daten verwalten muss, ist die Verwendung von Vuex eine gute Wahl, da sie die Interaktion zwischen Komponenten erheblich vereinfachen und die Entwicklungseffizienz verbessern kann.

Das obige ist der detaillierte Inhalt vonVUE3-Erste-Schritte-Tutorial: Verwenden von Vuex State Management zur Implementierung eines globalen Datenmanagements. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!