Wie verwende ich Vuex für die Datenverwaltung und Statusfreigabe?

Vuex ist eine speziell für Vue.js entwickelte Zustandsverwaltungsbibliothek. Sie kann uns helfen, die Datenübertragung und -verwaltung zwischen Komponenten zu vereinfachen und die Wartbarkeit und Skalierbarkeit der Anwendung zu verbessern. In diesem Artikel wird die Verwendung von Vuex für die Datenverwaltung und Statusfreigabe vorgestellt, um allen dabei zu helfen, Vuex besser zu verstehen und anzuwenden.

1. Was ist Vuex?

Vuex ist die offiziell von Vue.js bereitgestellte Statusverwaltungsbibliothek. Sie verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten und die Konsistenz des Status mit entsprechenden Regeln sicherzustellen. In Vuex können wir unsere Daten und unseren Status über den Store verwalten. Der Store umfasst die folgenden Kernkonzepte:

• state: Statusdaten, die zum Speichern verschiedener Statuswerte in der Anwendung verwendet werden;
• getter: Berechnete Attribute abrufen , wird verwendet, um einige Statuswerte aus dem Speicher abzuleiten;
• Mutation: Den Status synchron ändern, um die Daten im Status synchron zu ändern;
• Aktion: Asynchron geänderter Status, der zum Verarbeiten von asynchronen Vorgängen und zum Senden von Mutationen verwendet wird
Modul: Modularisierung, wird verwendet, um große Geschäfte in kleinere Untermodule aufzuteilen und deren Status bzw. Betrieb zu verwalten.

2. Warum brauchen Sie Vuex?

In Vue.js-Anwendungen wird die Daten- und Statusübertragung zwischen Komponenten immer komplexer. Derzeit benötigen wir eine Statusverwaltungsbibliothek, die uns bei der Verwaltung und gemeinsamen Nutzung verschiedener Statuswerte hilft ​in der Bewerbung. Die Verwendung von Vuex kann die folgenden Vorteile bringen:

Zentralisierte Zustandsverwaltung: Jede Komponente kann auf denselben Zustandsbaum zugreifen, wodurch die Zustandsverwaltung einheitlicher und zentralisiert wird.
1. Einfache Wartung und Fehlerbehebung: Vuex kann uns helfen, den Status und die Daten besser zu verstehen Fluss der Anwendung, was das Debuggen und die Wartung komfortabler macht;
2. Verbesserung der Lesbarkeit und Wartbarkeit des Codes: Mit Vuex kann der Kontrollfluss der Daten an einem Ort konzentriert werden, wodurch die Codelogik effizienter wird. Klar und einfach zu warten ;
3. Trennung von Geschäftslogik und Zustandsverwaltung: Durch die Speicherung des Zustands im Vuex-Speicher kann die Trennung von Geschäftslogikkomponenten und Zustandsverwaltungskomponenten erreicht werden, um Wartung und Verwaltung zu erleichtern.

3. Wie verwende ich Vuex?

Bevor Sie Vuex verwenden, müssen Sie die Vuex-Bibliothek installieren und im Vue-Projekt einführen:

npm install vuex --save

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

Vue.use(Vuex)

Als nächstes müssen wir einen Vuex-Store erstellen und ihn wie folgt in der Vue-Instanz registrieren:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    evenOrOdd(state) {
      return state.count % 2 === 0 ? 'even' : 'odd'
    }
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    count() {
      return this.$store.state.count
    },
    evenOrOdd() {
      return this.$store.getters.evenOrOdd
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync')
    }
  }
})

Wie oben Code haben wir einen Vuex-Store erstellt, der drei Kernkonzepte (Zustand, Mutationen und Aktionen) enthält. Unter diesen wird der Status zum Speichern von Statusdaten verwendet, Mutationen werden zum synchronen Ändern des Status verwendet und Aktionen werden zum Verarbeiten asynchroner Vorgänge und zum Übermitteln von Mutationen verwendet. Hier definieren wir auch einen Getter, der berechnet, ob der Zählwert im Status gerade oder ungerade ist.

In der Vue-Instanz verwenden wir das berechnete Attribut und das Methodenattribut, um auf den Status, die Mutation und die Aktion im Store zuzugreifen. count und evenOrOdd im Attribut „computed“ werden auf der Grundlage der tatsächlichen Daten im Status berechnet, während „increment“, „decrement“ und „incrementAsync“ im Attribut „methods“ Methoden sind, die zum Ändern des Status verwendet werden.

4. Die Verwendung von Status und Mutation

State ist ein Kernkonzept von Vuex. Es wird verwendet, um verschiedene Statuswerte in der Anwendung zu speichern. In Vuex können wir auf folgende Weise auf den Status zugreifen und ihn ändern:

Zugriff auf den Status: Wir können über this.$store.state auf den Status im Store zugreifen. Die Anzahl im obigen Beispielcode ist beispielsweise ein Status. .
Status direkt ändern:
2. Durch direktes Ändern des Status meldet das statische Analysetool von Vuex einen Fehler, da das Prinzip von Vuex darin besteht, dass Datenänderungen im Speicher Mutationen durchlaufen müssen. Wenn wir den Wert des Status direkt ändern müssen, müssen wir Vue.set verwenden, damit die Änderung reaktionsschnell Aktualisierungen der Benutzeroberfläche auslösen kann. Der Beispielcode lautet wie folgt:
   

Vue.set(state.obj, 'newProp', 123)

Status durch Mutationen ändern:
3. Mutationen sind eine Sammlung Wird zum Ändern des Status verwendet. In Vuex handelt es sich um einen synchronen Vorgang. Durch die Ausführung von Mutationen können wir die Werte im Zustand beliebig ändern. Mutationen sind die einzige Möglichkeit, den Zustand in Vuex zu ändern. Asynchrone Operationen oder andere Nebenwirkungen können bei Mutationen nicht ausgeführt werden. Wir können Mutationen auf folgende Weise einreichen:
   

this.$store.commit('increment')   // 传入 mutation 的名称
this.$store.commit({
  type: 'increment',
  amount: 10    // 传入额外的参数
})

4. Verwendung von Aktionen und Gettern

In Anwendungen müssen wir manchmal einige asynchrone Vorgänge ausführen. In diesem Fall können wir Aktionen zur Verarbeitung verwenden. Aktionen können alle asynchronen Vorgänge enthalten Operation, und schließlich müssen die Daten im Staat durch Übermittlung einer Mutation geändert werden. In Vuex können wir Aktionen auf folgende Weise ausführen:

Aktion definieren:

actions: {
  incrementAsync(context) {
    setTimeout(() => {
      context.commit('increment')
    }, 1000)
  }
}

Aktion senden:

this.$store.dispatch('incrementAsync')

In Vuex kann Getter als berechnete Eigenschaft im Speicher betrachtet werden, die durch einen bestimmten Zustand erfolgt Aus dem Zustand des Geschäfts abgeleitete Werte können eine große Anzahl wiederholter und logisch komplexer Berechnungen zwischengespeichert werden. In Vuex können wir Getter auf folgende Weise verwenden:

Getter definieren:

getters: {
  evenOrOdd(state) {
    return state.count % 2 === 0 ? 'even' : 'odd'
  }
}

Zugriffs-Getter:

this.$store.getters.evenOrOdd

5. Verwendung von Modulen

在 Vuex 中，如果我们的应用程序中存在大量的 state 和 mutations、actions 和 getters，单独存放到一个 store 中会极大地增加代码的复杂性和维护难度，此时我们可以使用 module 在 Vuex 中进行模块化管理。在 using module 模式中，每个模块都拥有自己的 state、mutations、actions 和 getters，从而让代码更加清晰明了、易于维护。使用 module 的方法和常规的 Vuex store 相似，只是需要在 Vuex.Store() 中添加模块，如下所示：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA
  }
})

如上代码所示，我们创建了一个名为 moduleA 的模块，然后在 store 中通过 modules 选项将其添加到了 Vuex 的 store 中。在组件中访问模块的 state、mutations、actions 和 getters，和访问常规的 Vuex store 中的一样，只需要在前面加上模块名即可，例如：

computed: {
  ...mapState('a', {
    count: state => state.count
  }),
  ...mapGetters('a', [
    'evenOrOdd'
  ])
},
methods: {
  ...mapMutations('a', [
    'increment'
  ]),
  ...mapActions('a', [
    'incrementAsync'
  ])
}

在组件中，使用 mapState、mapMutation、mapActions 和 mapGetters 进行访问和操作，可以更加方便和快捷地操作和维护模块的状态和数据。

六、总结

本文简要介绍了 Vue.js 的状态管理库 Vuex 的使用方法和常用场景，包括 state、mutation、action、getter 和 module 等几个核心概念的使用。Vuex 可以帮助我们有效地管理和共享应用程序中的各种状态值，提高代码的可维护性和可扩展性。在使用 Vuex 的过程中，我们还需要注意一些细节和坑点，如同步和异步操作、state 和 mutation 的使用规范等问题，需要认真掌握和注意。

Das obige ist der detaillierte Inhalt vonWie verwende ich Vuex für die Datenverwaltung und Statusfreigabe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!