Was ist Vuex-Zustandsverwaltung in Vue und wie wird sie verwendet?

Was ist Vuex-Zustandsverwaltung in Vue und wie wird sie verwendet?

Vue ist ein beliebtes Frontend-Framework, das aufgrund seiner Benutzerfreundlichkeit und leistungsstarken Funktionen häufig in Projekten eingesetzt wird. Da Frontend-Projekte immer größer und komplexer werden, wird die Datenverwaltung immer schwieriger. In dieser Zeit wird die Statusverwaltung besonders wichtig. Als Statusverwaltungstool von Vue kann Vuex uns dabei helfen, Anwendungsstatus besser zu organisieren und zu verwalten und die Wartbarkeit des Codes zu verbessern. In diesem Artikel werden die grundlegenden Konzepte und die Verwendung der Vuex-Zustandsverwaltung vorgestellt und den Lesern geholfen, die Rolle und praktische Anwendung der Vuex-Zustandsverwaltung zu verstehen.

1. Grundkonzepte der Vuex-Zustandsverwaltung

1. Zustand

Der Zustandsspeicher ist der Kernbestandteil von Vuex und wird zum Speichern des von Komponenten gemeinsam genutzten Zustands verwendet. Die Datenstruktur von State kann ein Array, ein Objekt usw. sein. Im Gegensatz zu den Daten von Komponenten sind State-Daten global. Die Daten in State werden von Store-Objekten verwaltet und können im Projekt einfach abgerufen und bearbeitet werden.

2. Getter

Getter kann als berechnete Eigenschaft von State betrachtet werden. In der Komponente können Sie über Getter auf die Variablen im State-Objekt zugreifen, um die Daten in State zu erhalten zu Vue. berechnetes Attribut in . Die Verwendung von Gettern in der Zustandsverwaltung kann eine komplexe Berechnungslogik kapseln und die gemeinsame Nutzung und Wiederverwendung zwischen mehreren Komponenten erleichtern.

3. Mutation

Mutation definiert einige Funktionen zum Aktualisieren des Status und zum Ändern der Daten im Status. Es können nur synchrone Vorgänge ausgeführt werden. Da Änderungen am Status durch Mutation erfolgen müssen, wird dadurch sichergestellt, dass Änderungen an den Daten nachverfolgt werden können und der Status in Echtzeit aktualisiert werden kann. Die Verwendung von Mutation ist ebenfalls sehr einfach. Rufen Sie einfach die Methode $store.commit in der Komponente auf und übergeben Sie den entsprechenden Mutation-Namen.

4. Action

Action ist eine asynchrone Operation, die die Geschäftslogik verarbeitet. Sie kann jede asynchrone Operation umfassen, z. B. HTTP-Anfrage, setTimeout oder andere asynchrone Operationen. Wenn eine asynchrone Operation erforderlich ist, wird die Aktion an die Mutation übergeben und die Mutation führt eine synchrone Operation aus, um den Status zu aktualisieren. Der Unterschied zwischen Aktion und Mutation besteht darin, dass Aktion asynchrone Vorgänge enthalten kann. Aktionen können auch andere Aktionen und Mutationen aufrufen.

5. Module

Module ermöglicht es uns, den Store in Module aufzuteilen, und jedes Modul kann seine eigenen State-, Mutation-, Action- und Getter-Methoden haben. Dadurch kann der Store besser organisiert werden, die Lesbarkeit des Codes verbessert und die Zusammenarbeit im Team erleichtert werden. Der Modularitätsmechanismus von Vuex ähnelt der Modularität von ES6. Mithilfe der Modularität können Sie den Store problemlos erweitern und ändern.

2. So verwenden Sie die Vuex-Statusverwaltung

1. Installieren und referenzieren Sie Vuex

Sie müssen Vuex installieren und referenzieren, bevor Sie Vuex verwenden.

Installationsmethode:

npm install vuex --save

Referenzmethode:

import Vuex from 'vuex'
Vue.use(Vuex)

2. Store erstellen

Bei Verwendung der Vuex-Statusverwaltung müssen wir zunächst ein Store-Objekt erstellen, das eine Shell sein sollte, die den Status der gesamten Anwendung enthält. Das Erstellen eines Store-Objekts ist ebenfalls sehr einfach. Sie müssen lediglich State, Mutation, Action, Getter und andere Module miteinander kombinieren.

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

Vue.use(Vuex)

// 定义应用的初始状态
const state = {
  count: 0
}

// 定义 Mutation，处理 State
const mutations = {
  increment (state) {
    state.count++
  },
  decrement (state) {
    state.count--
  }
}

// 定义 Action，处理异步操作
const actions = {
  incrementAction ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

// 定义 Getter，获取 State 中的数据
const getters = {
  getCount: state => state.count
}

// 创建 Store 对象
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

3. Store in Komponenten verwenden

Nachdem der Store erstellt wurde, kann er in Komponenten verwendet werden. Die Methode zur Verwendung von Store in einer Komponente besteht darin, es über this.$store.xxx aufzurufen, wobei xxx Status, Mutation, Aktion oder Getter sein kann.

<template>
  <div>
    <p>当前的数字为：{{count}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

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

4. Modul in Komponenten verwenden

Wenn die Anwendung immer größer wird, wird die Verwendung von Status, Mutation, Aktion und Getter etwas chaotisch. Um den Code besser zu organisieren, können wir sie in einem Modul zusammenführen.

const appModule = {
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  },
  actions: {
    incrementAction ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => state.count
  }
}

export default new Vuex.Store({
  modules: {
    appModule: appModule
  }
})

Dann kann es in der Komponente wie folgt verwendet werden:

<template>
  <div>
    <p>当前的数字为：{{count}}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.getters['appModule/getCount']
    }
  },
  methods: {
    increment () {
      this.$store.commit('appModule/increment')
    },
    decrement () {
      this.$store.commit('appModule/decrement')
    }
  }
}
</script>

Das Obige ist die Einführung der Vuex-Statusverwaltung in diesem Artikel. Ich hoffe, dass es für die Leser hilfreich ist. In praktischen Anwendungen kann die Bedeutung der Zustandsverwaltung nicht ignoriert werden. Die ordnungsgemäße Verwendung von Vuex kann die Entwicklung effizienter und reibungsloser machen.

Das obige ist der detaillierte Inhalt vonWas ist Vuex-Zustandsverwaltung in Vue und wie wird sie verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!