Praktischer Austausch über die Verwendung von Vuex zur Verwaltung des globalen Status in Vue

Vue ist ein beliebtes Front-End-Framework. Seine Grundidee besteht darin, die Seite in verschiedene Komponenten zu unterteilen, wobei jede Komponente ihren eigenen Status hat. Es gibt jedoch Situationen, in denen wir den Status zwischen mehreren Komponenten teilen müssen. Um mit dieser Situation umzugehen, stellt Vue vuex bereit, eine Bibliothek eines Drittanbieters, die speziell für die Verwaltung des globalen Status der Anwendung entwickelt wurde. In diesem Artikel werden wir einige praktische Erfahrungen mit Vuex in Vue-Projekten teilen.

Was ist Vuex?

Vuex ist das offizielle Statusverwaltungstool für Vue.js. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, die über ein einziges Objekt implementiert werden.

Zu den Kernkonzepten von Vuex gehören:

• Status: Speichert den Status auf Anwendungsebene.
• Getter: Rufen Sie den im Status gespeicherten Wert ab und führen Sie Berechnungen durch.
• Mutation: Ändern Sie den Wert im Zustand.
• Aktion: Mutation einreichen und asynchronen Vorgang durchführen.
• Modul: Zerlegen Sie den Store in mehrere Untermodule. Jedes Modul kann seinen eigenen Status, seine eigene Mutation und seine eigene Aktion haben.

Verwendung von Vuex in einem Vue-Projekt Eine einfache Beispielanwendung, nennen wir sie „ToDo-Liste“. Mit dieser Anwendung können wir Aufgaben hinzufügen und entfernen und sie in einer Aufgabenliste anzeigen. Im Folgenden stellen wir vor, wie Sie Vuex zum Implementieren dieser ToDo-List-Anwendung verwenden.

Um Vuex nutzen zu können, müssen wir es zunächst in unsere Vue-Anwendung importieren. Wir können das Vuex-Objekt wie unten gezeigt in main.js importieren und einfügen:

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    removeTask(state, index) {
      state.tasks.splice(index, 1)
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

Hier importieren wir zuerst Vuex und injizieren es in das Vue-Objekt. Als Nächstes erstellen wir eine Konstante namens Store, die mithilfe des Vuex.Store-Konstruktors eine neue Vuex-Speicherinstanz erstellt. Hier definieren wir den Zustand und die Mutationen in unserem Shop. Unser Status ist das Aufgabenarray, das die Aufgaben in unserer ToDo-Liste speichert. Zu unseren Mutationen gehören „addTask“ und „removeTask“, die zum Hinzufügen bzw. Entfernen von Aufgaben verwendet werden.

Wir injizieren den Store auch in die Vue-Instanz, damit wir ihn in allen Komponenten unserer Anwendung verwenden können. Jetzt können wir in unserer Komponente auf den Status und die Mutationen im Speicher zugreifen.

In unserer Beispiel-ToDo-List-Anwendung haben wir eine Komponente namens AddTask.vue, die ein Formular enthält, das es dem Benutzer ermöglicht, Aufgaben hinzuzufügen. In dieser Komponente können wir $store verwenden, um auf den Status und die Mutationen im Store zuzugreifen und unsere addTask-Mutation auszulösen, um die Aufgabe dem Store hinzuzufügen. Der Code lautet wie folgt:

<template>
  <form @submit.prevent="addTask">
    <input type="text" v-model="task" />
    <button type="submit">Add Task</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      task: ''
    }
  },
  methods: {
    addTask() {
      this.$store.commit('addTask', this.task)
      this.task = ''
    }
  }
}
</script>

Hier verwenden wir ein Formular in der Komponente, und wenn das Formular gesendet wird, rufen wir die Methode addTask auf und übergeben den Aufgabennamen als Parameter an die Methode $store.commit. Dies löst die zuvor definierte AddTask-Mutation aus, um die Aufgabe zum Speicher hinzuzufügen.

Als nächstes haben wir eine TasksList.vue-Komponente, die eine Liste von Aufgaben anzeigt und es dem Benutzer ermöglicht, Aufgaben zu löschen. In dieser Komponente können wir $store verwenden, um auf den Status und die Mutationen im Store zuzugreifen und unsere „removeTask“-Mutation auszulösen, um die Aufgabe aus dem Store zu entfernen. Der Code lautet wie folgt:

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <button @click="removeTask(index)">Remove Task</button>
    </li>
  </ul>
</template>

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

Hier verwenden wir ein berechnetes Attribut, um den Status des Aufgabenarrays im Store abzurufen. Wir verwenden auch die v-for-Direktive in der Vorlage, um jede Aufgabe anzuzeigen und nach jeder Aufgabe eine Schaltfläche zum Löschen hinzuzufügen. Wenn der Benutzer auf die Schaltfläche „Löschen“ klickt, rufen wir die Methode „removeTask“ auf und übergeben den Index der Aufgabe als Parameter an die Methode „$store.commit“. Dies löst die zuvor definierte „removeTask“-Mutation aus, die die Aufgabe aus dem Speicher entfernt.

Fazit

In diesem Artikel haben wir gelernt, wie man Vuex verwendet, um den globalen Status unserer Anwendung zu verwalten, und gezeigt, wie man es tatsächlich in einem Vue-Projekt über eine ToDo-List-Anwendung verwendet. In einem Vue-Projekt können wir durch die Verwendung von Vuex den Status einfacher verwalten und teilen und unseren Code modularer und lesbarer machen. Wenn Sie auch ein Vue-Projekt entwickeln, sollten Sie die Verwendung von Vuex in Betracht ziehen, um den Status Ihrer Anwendung besser zu verwalten!

Das obige ist der detaillierte Inhalt vonPraktischer Austausch über die Verwendung von Vuex zur Verwaltung des globalen Status in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!