Erste Schritte mit der VUE3-Entwicklung: Verwendung von Vuex State Management

VUE3 ist eine aufregende neue Generation des VUE-Frameworks, das Leistung, Wartbarkeit und Entwicklungserfahrung erheblich verbessert. In VUE3 ist Vuex ein sehr wichtiges Statusverwaltungstool, das uns dabei helfen kann, den Status der Anwendung besser zu verwalten.

In diesem Artikel wird die Verwendung von Vuex in VUE3 vorgestellt, einschließlich der Erstellung eines Vuex-Speichers, der Verwendung von Vuex in Komponenten, der Durchführung asynchroner Vorgänge in Vuex, der Verwendung von Plug-Ins usw.

Vuex-Store erstellen

Zuerst müssen wir Vuex installieren:

npm install vuex@next

Als nächstes können wir zum Erstellen eines Vuex-Stores den folgenden Code zur Eintragsdatei von VUE3 (z. B. main.js) hinzufügen:

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

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

Hier , übergeben wir „Use createApp“, um eine VUE-Instanz zu erstellen, und verwenden dann das Plug-in „store“, um den Vuex-Store zur Anwendung hinzuzufügen. Jetzt müssen wir einen Store-Ordner erstellen und dann darin eine index.js-Datei erstellen: createApp创建了一个VUE实例，然后使用了store插件将Vuex store添加到应用程序中。现在我们需要创建一个store文件夹，然后在里面创建一个index.js文件：

import { createStore } from 'vuex'

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

export default store

在这里，我们首先使用createStore函数创建了一个Vuex store，并指定了一个初始状态count: 0。然后，我们定义了一个名为increment的mutation，它以state作为参数，并将state.count递增1。最后，我们将store导出，以便在应用程序中使用。

在组件中使用Vuex

现在我们已经创建了Vuex store，接下来我们将在组件中使用它。我们将在一个Counter组件中使用count和incrementmutation。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment Count</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

在这里，我们首先使用计算属性count获取store.state.count的当前值，然后在按钮上添加了一个点击事件，调用了incrementmutation。

现在我们可以在应用程序中使用Counter组件，并且它将自动连接到Vuex store。

异步操作

有时，我们需要在Vuex store中执行异步操作，例如发送HTTP请求。在这种情况下，我们可以使用示例代码中的actions选项。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      todos: []
    }
  },
  mutations: {
    setTodos(state, todos) {
      state.todos = todos
    }
  },
  actions: {
    async fetchTodos({ commit }) {
      const response = await fetch('/api/todos')
      const todos = await response.json()
      commit('setTodos', todos)
    }
  }
})

export default store

在这里，我们首先定义了一个名为setTodos的mutation，并将传入的todos参数设置为state.todos。然后，我们使用actions选项定义了一个名为fetchTodos的操作，它将触发异步操作来获取todos数据，并在完成后调用commit来触发setTodosmutation。

使用插件

我们可以使用插件来扩展Vuex store的功能。例如，我们可以使用vuex-persistedstate插件来使Vuex store持久化，以便每次刷新页面都不会重置store的状态。

首先，我们需要安装插件：

npm install vuex-persistedstate

然后，我们可以将插件添加到store中：

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  // ...
  plugins: [createPersistedState()]
})

export default store

在这里，我们从vuex-persistedstate导入了createPersistedStaterrreee

Hier erstellen wir zunächst einen Vuex-Store mit der Funktion createStore und geben einen Anfangsstatuscount an : 0. Dann definieren wir eine Mutation namens increment, die state als Parameter verwendet und state.count um 1 erhöht. Schließlich exportieren wir den Store zur Verwendung in unserer Anwendung.

Vuex in einer Komponente verwenden

Da wir nun den Vuex-Store erstellt haben, werden wir ihn in einer Komponente verwenden. Wir werden count und incrementmutation in einer Counter-Komponente verwenden.

rrreee

Hier verwenden wir zunächst die berechnete Eigenschaft count, um den aktuellen Wert von store.state.count abzurufen, und fügen dann ein Klickereignis auf der Schaltfläche hinzu, das InkrementMutation. 🎜🎜Jetzt können wir die Counter-Komponente in unserer Anwendung verwenden und sie stellt automatisch eine Verbindung zum Vuex-Store her. 🎜🎜Asynchrone Vorgänge🎜🎜Manchmal müssen wir asynchrone Vorgänge im Vuex-Speicher ausführen, z. B. das Senden von HTTP-Anfragen. In diesem Fall können wir die Option actions im Beispielcode verwenden. 🎜rrreee🎜Hier definieren wir zunächst eine Mutation mit dem Namen setTodos und setzen den eingehenden Parameter todos auf state.todos . Anschließend definieren wir mithilfe der Option actions eine Aktion namens fetchTodos, die einen asynchronen Vorgang auslöst, um die Todos-Daten abzurufen und nach Abschluss commit aufzurufen. code> um eine setTodos-Mutation auszulösen. 🎜🎜Plugins verwenden🎜🎜Wir können Plugins verwenden, um die Funktionalität des Vuex-Stores zu erweitern. Beispielsweise können wir das Plugin vuex-persistedstate verwenden, um den Vuex-Store dauerhaft zu machen, sodass der Status des Stores nicht bei jeder Aktualisierung der Seite zurückgesetzt wird. 🎜🎜Zuerst müssen wir das Plugin installieren: 🎜rrreee🎜 Dann können wir das Plugin zum Store hinzufügen: 🎜rrreee🎜Hier haben wir createPersistedStateaus vuex-persistedstate importiert > Funktion und fügen Sie sie dann als Plugin zum Store hinzu. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir gelernt, wie man die Vuex-Statusverwaltung in VUE3 verwendet. Wir haben gelernt, wie man einen Vuex-Store erstellt, wie man Vuex in Komponenten verwendet, wie man asynchrone Vorgänge in Vuex durchführt und wie man Plugins verwendet, um die Funktionalität von Vuex zu erweitern. 🎜🎜Die Verwendung von Vuex kann uns helfen, den Status unserer Anwendung besser zu verwalten, unsere Anwendung wartbarer zu machen und eine bessere Grundlage für zukünftige Erweiterungen zu schaffen. 🎜

Das obige ist der detaillierte Inhalt vonErste Schritte mit der VUE3-Entwicklung: Verwendung von Vuex State Management. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!