Vue3+TS+Vite-Entwicklungsfähigkeiten: So nutzen Sie Vuex für die Zustandsverwaltung

Vue3+TS+Vite-Entwicklungsfähigkeiten: So verwenden Sie Vuex für die Zustandsverwaltung

Einführung:
Bei der Vue-Entwicklung ist die Zustandsverwaltung ein wichtiges Thema. Als offiziell empfohlenes Zustandsverwaltungstool von Vue wird Vuex sehr häufig in Projekten verwendet. In diesem Artikel wird erläutert, wie Sie Vuex für die Statusverwaltung und die Entwicklung mit Vue3, TypeScript und Vite verwenden.

1. Abhängigkeiten installieren
Zuerst müssen wir die Versionen Vuex und vuex@4 im Projekt installieren, um Vue3 zu unterstützen:

npm install vuex@next --save

2. Store erstellen
Erstellen Sie ein Store-Verzeichnis im src Verzeichnis und erstellen Sie eine index.ts-Datei. In der Datei index.ts müssen wir die Vuex Store-Instanz definieren und die Instanz für die globale Verwendung exportieren.

// store/index.ts
import { createStore } from 'vuex';

const store = createStore({
  // 定义state
  state: {
    count: 0,
  },
  // 定义mutations
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  // 定义actions
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    },
  },
});

export default store;

3. Erstellen Sie main.ts
In der main.ts-Datei im src-Verzeichnis müssen wir den Vuex-Store importieren und den Store in der Funktion „createApp“ verwenden.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

createApp(App)
  .use(store)
  .mount('#app');

4. Mit Vuex
Jetzt haben wir die Grundkonfiguration von Vuex eingerichtet. Als nächstes können wir Vuex in der Komponente verwenden.

In App.vue lösen wir die Inkrementmutation im Store aus, indem wir die mapState辅助函数，来映射store中的count值到组件中，并通过使用mapMutationsHilfsfunktion verwenden.

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

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
  },
};
</script>

Zu diesem Zeitpunkt haben wir die grundlegende Verwendung von Vuex im Vue3+TS+Vite-Projekt abgeschlossen. Durch die Verwendung von Vuex können wir den globalen Status der Anwendung einfach verwalten und eine Statusfreigabe und -kommunikation erreichen, wodurch die Entwicklungseffizienz und die Wartbarkeit des Codes verbessert werden.

Zusammenfassung:
In diesem Artikel wird die Verwendung von Vuex für die Zustandsverwaltung im Vue3+TS+Vite-Projekt vorgestellt. Durch die Installation von Abhängigkeiten, das Erstellen von Store-Instanzen und die Verwendung von Vuex-Hilfsfunktionen können wir Vuex problemlos im Projekt verwenden, um den globalen Status zu verwalten und zu teilen.

Das Obige ist eine Einführung in die Verwendung von Vuex für die Zustandsverwaltung in Vue3+TS+Vite-Entwicklungsfähigkeiten. Ich hoffe, dass es für Ihre Entwicklungspraxis hilfreich sein wird. Wenn Sie Fragen haben, können Sie diese gerne besprechen.

Das obige ist der detaillierte Inhalt vonVue3+TS+Vite-Entwicklungsfähigkeiten: So nutzen Sie Vuex für die Zustandsverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!