Detaillierte Erläuterung der Verwendung des Statusmanagers Vuex 4 in Vue 3 zur Erzielung eines globalen Datenaustauschs

Vue 3 ist ein beliebtes JavaScript-Framework, das häufig zum Erstellen von Benutzeroberflächen verwendet wird. Für den globalen Datenaustausch lässt es sich problemlos mit dem State Manager Vuex kombinieren. Dieser Artikel befasst sich mit der Verwendung von Vuex 4, der neuen Version in Vue 3, um Entwicklern zu helfen, dieses leistungsstarke Statusverwaltungstool besser zu verstehen und anzuwenden.

Zuerst müssen wir Vuex 4 installieren. In einem Vue 3-Projekt können Sie den Befehl npm oder Yarn verwenden, um die neueste Version von Vuex zu installieren. Nachdem die Installation von

npm install vuex@next

oder

yarn add vuex@next

abgeschlossen ist, importieren Sie das Vuex-Modul in die Eintragsdatei von Vue 3 und verwenden Sie die Funktion createApp, um eine Vue-Anwendungsinstanz zu erstellen. createApp函数创建Vue应用程序实例。

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
  // 这里定义Vuex的状态和操作
})

const app = createApp(App)
app.use(store)
app.mount('#app')

在上述代码中，我们使用createStore函数创建了一个Vuex的store实例，并将其作为插件使用，以便在整个应用程序中使用Vuex进行状态管理。

接下来，让我们了解Vuex 4中最重要的两个概念：状态（state）和操作（mutation）。

状态是应用程序中的数据源，可以在任何组件中访问。操作是用于修改状态的方法，它们通过同步的方式来改变状态。在Vuex 4中，状态和操作都是使用纯函数的方式来定义的。

例如，我们可以在Vuex中定义一个counter状态和一个increment操作。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})

在上述代码中，我们定义了一个初始状态counter为0，并且定义了一个名为increment的操作，它可以通过state.counter++来增加计数器的值。

在组件中使用Vuex的状态和操作非常简单。可以通过$store对象来访问状态和操作。

export default {
  methods: {
    incrementCounter() {
      this.$store.commit('increment')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}

在上述代码中，我们通过commit方法来触发increment操作，并使用state方法来获取counter状态的当前值。

除了状态和操作，Vuex 4还引入了新的特性：动作（action）和getter。

动作是通过异步方式来操作状态的函数。在Vuex 4中，可以通过actions属性来定义动作。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

在上述代码中，我们定义了一个名为asyncIncrement的动作，它通过setTimeout函数来模拟异步操作，并在1秒后触发increment操作。

Getter是用于获取状态的计算属性。在Vuex 4中，可以通过getters属性来定义getter。

const store = createStore({
  state() {
    return {
      counter: 0
    }
  },
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  getters: {
    doubleCounter(state) {
      return state.counter * 2
    }
  }
})

在上述代码中，我们定义了一个名为doubleCounter的getter，它返回counter状态的两倍。

在组件中使用动作和getter与使用操作和状态类似。可以通过$store.dispatch方法来触发动作，并通过$store.getters属性来获取getter的值。

export default {
  methods: {
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement')
    }
  },
  computed: {
    counter() {
      return this.$store.state.counter
    },
    doubleCounter() {
      return this.$store.getters.doubleCounter
    }
  }
}

在上述代码中，我们通过this.$store.dispatch方法来触发asyncIncrement动作，并通过this.$store.getters.doubleCounter来获取doubleCounterrrreee

Im obigen Code verwenden wir die Funktion createStore, um eine Vuex-Store-Instanz zu erstellen und diese als Plug-in zu verwenden, um Vuex für die Statusverwaltung in der gesamten Anwendung zu verwenden.

Als nächstes wollen wir die beiden wichtigsten Konzepte in Vuex 4 verstehen: Zustand und Mutation. 🎜🎜State ist eine Datenquelle in der Anwendung und kann in jeder Komponente aufgerufen werden. Operationen sind Methoden zur Zustandsänderung. Sie ändern den Zustand synchron. In Vuex 4 werden Zustände und Operationen mithilfe reiner Funktionen definiert. 🎜🎜Zum Beispiel können wir in Vuex einen Zähler-Status und eine Inkrementierung-Operation definieren. 🎜rrreee🎜Im obigen Code definieren wir einen Anfangszustand counter als 0 und definieren eine Operation namens increment, der state++ übergeben werden kann. code> um den Zählerwert zu erhöhen. 🎜🎜Die Verwendung von Vuex-Zuständen und -Aktionen in Komponenten ist sehr einfach. Auf Status und Vorgänge kann über das Objekt <code>$store zugegriffen werden. 🎜rrreee🎜Im obigen Code lösen wir die Operation increment über die Methode commit aus und verwenden die Methode state, um den zu erhalten countercode>Der aktuelle Wert des Status. 🎜🎜Zusätzlich zu Status und Operationen führt Vuex 4 auch neue Funktionen ein: Aktionen und Getter. 🎜🎜Aktionen sind Funktionen, die den Zustand asynchron bearbeiten. In Vuex 4 können Aktionen über das Attribut actions definiert werden. 🎜rrreee🎜Im obigen Code definieren wir eine Aktion namens asyncIncrement, die asynchrone Vorgänge über die Funktion setTimeout simuliert und nach 1-Sekunden-Inkrement auslöst Betrieb. 🎜🎜Getter ist eine berechnete Eigenschaft, die zum Abrufen des Status verwendet wird. In Vuex 4 können Getter über das Attribut getters definiert werden. 🎜rrreee🎜Im obigen Code haben wir einen Getter namens doubleCounter definiert, der den doppelten Status von counter zurückgibt. 🎜🎜Die Verwendung von Aktionen und Gettern in Komponenten ähnelt der Verwendung von Operationen und Zuständen. Aktionen können über die Methode $store.dispatch ausgelöst werden und Getter-Werte können über die Eigenschaft $store.getters abgerufen werden. 🎜rrreee🎜Im obigen Code lösen wir die Aktion asyncIncrement über die Methode this.$store.dispatch aus und übergeben die this.$store.getters. doubleCounter, um den Wert von <code>doubleCounter zu erhalten. 🎜🎜Zusammenfassend bietet Vuex 4 eine bequeme Möglichkeit, den globalen Datenaustausch in Vue 3-Anwendungen zu verwalten. Durch die Definition von Zuständen, Operationen, Aktionen und Gettern können wir Daten einfach teilen und verwalten. Ich hoffe, dass dieser Artikel Ihnen hilft, die Verwendung und Prinzipien von Vuex 4 besser zu verstehen. 🎜

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Statusmanagers Vuex 4 in Vue 3 zur Erzielung eines globalen Datenaustauschs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!