Vue.js für Anfänger VueJs Teilzustandsverwaltung mit Vuex

Die Verwaltung des Status in einer Vue.js-Anwendung kann mit zunehmender Größe der App komplex werden. In diesem Beitrag untersuchen wir, wie man den Status mithilfe von Vuex, der offiziellen Statusverwaltungsbibliothek für Vue.js, effektiv verwaltet.

- Was ist Vuex?
Vuex ist eine Zustandsverwaltungsmusterbibliothek für Vue.js-Anwendungen. Es dient als zentraler Speicher für alle Komponenten einer Anwendung und erleichtert so den Datenaustausch zwischen ihnen. Dies hilft dabei, den Staat vorhersehbar zu verwalten.

- Vuex installieren
Um mit Vuex zu beginnen, müssen Sie es zunächst installieren. Wenn Sie Vue CLI verwenden, können Sie beim Erstellen Ihres Projekts die Installation auswählen. Wenn Sie bereits ein Projekt haben, installieren Sie es über npm:

npm install vuex@next --save

Vuex einrichten

- Erstellen Sie einen Shop
Erstellen Sie einen neuen Ordner mit dem Namen „store“ in Ihrem src-Verzeichnis und erstellen Sie in diesem Ordner eine Datei mit dem Namen „index.js“. Diese Datei enthält die Vuex-Store-Konfiguration. In diesem Beispiel erstellen wir einen einfachen Speicher zum Addieren und Subtrahieren eines Zählwerts.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0, // Example state
  },
  mutations: {
    increment(state) {
      state.count++; // Mutates the state
    },
    decrement(state) {
      state.count--; // Mutates the state
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // Commits the mutation
    },
    decrement({ commit }) {
      commit('decrement'); // Commits the mutation
    },
  },
  getters: {
    getCount(state) {
      return state.count; // Access state value
    },
  },
});

- Integrieren Sie den Vuex Store in Ihre Anwendung
Als nächstes integrieren Sie den Vuex-Store in Ihre Vue-Hauptinstanz. Bearbeiten Sie Ihre main.js-Datei:

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // Import the store

new Vue({
  el: '#app',
  store, // Add the store to the Vue instance
  render: h => h(App),
});

Verwenden von Vuex in Komponenten

Da Vuex nun eingerichtet ist, sehen wir uns an, wie Sie es in Ihren Komponenten verwenden. Hier ist ein Beispiel dafür, wie man von einer Komponente aus auf den Status zugreift und ihn ändert.

- Zugriffsstatus
Sie können über this.$store.state:
auf den Status zugreifen

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

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount; // Access getter
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('increment'); // Dispatch action
    },
    decrement() {
      this.$store.dispatch('decrement'); // Dispatch action
    },
  },
};
</script>

Abschluss

In diesem Beitrag haben wir die Grundlagen der Zustandsverwaltung in Vue.js mit Vuex behandelt. Mit Vuex wird die Statusverwaltung Ihrer Anwendungen viel strukturierter und vorhersehbarer. Im nächsten Teil unserer Serie werden wir uns mit fortgeschritteneren Themen wie Modulen und asynchronen Aktionen in Vuex befassen.

Ich hoffe, Sie fanden diesen Beitrag hilfreich! Fühlen Sie sich frei, unten Fragen oder Kommentare zu hinterlassen ?.

Das obige ist der detaillierte Inhalt vonVue.js für Anfänger VueJs Teilzustandsverwaltung mit Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!