Vuex-Eigenschaften und Verwendung

4. Vuex-Eigenschaften und Verwendung

Vuex ist ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde. Es verwaltet den Status der gesamten Anwendung über einen einzigen Statusbaum (Speicher), wodurch die Statusverwaltung einfacher und konsistenter wird.

Nachfolgend finden Sie eine Beschreibung jeder Immobilie in Vuex:

1. state: speichert den Status der Anwendung.
2. Getter: Berechnen Sie die Daten im Status und geben Sie einen neuen Wert zurück.
3. Mutationen: Ändern Sie die Daten im Staat.
4. Aktionen: Mutationen einreichen, um Daten im Bundesstaat zu ändern.
5. Module: Teilen Sie den Shop zur einfachen Verwaltung in mehrere Module auf.

Die Verwendung von Vuex erfordert die folgenden Schritte:

1. Vuex installieren: Installieren Sie Vuex mit npm.
2. Store erstellen: Erstellen Sie eine Datei „store.js“ im Stammverzeichnis der Anwendung.
3. Status definieren: Definieren Sie den Status in der Datei „store.js“.
4. Getter definieren: Definieren Sie Getter in der Datei „store.js“.
5. Mutationen definieren: Definieren Sie Mutationen in der Datei store.js.
6. Aktionen definieren: Definieren Sie Aktionen in der Datei „store.js“.
7. Registrieren des Stores: Registrieren Sie den Store in der Datei main.js der Anwendung.
8. Verwendung von Stores in Komponenten: Zugriff auf Status und Getter in Komponenten, die Stores verwenden müssen.

Das Obige stellt die grundlegende Verwendung von Vuex dar. Weitere Einzelheiten finden Sie in der offiziellen Vuex-Dokumentation.

Hier ist ein Beispielcode mit Vuex:

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
// 使用 Vuex
Vue.use(Vuex)
// 定义 Vuex 状态
const state = {
    
    
  count: 0
}
// 定义 Vuex 计算属性
const getters = {
    
    
  count: state => state.count
}
// 定义 Vuex 变更
const mutations = {
    
    
  increment (state) {
    
    
    state.count++
  },
  decrement (state) {
    
    
    state.count--
  }
}
// 定义 Vuex 动作
const actions = {
    
    
  increment ({
     
      commit }) {
    
    
    commit('increment')
  },
  decrement ({
     
      commit }) {
    
    
    commit('decrement')
  }
}
// 导出 Vuex Store 实例
export default new Vuex.Store({
    
    
  state,
  getters,
  mutations,
  actions
})

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

// 创建 Vue 根实例
new Vue({
    
    
  // 注册 Vuex Store
  store,
  // 渲染根组件
  render: h => h(App)
}).$mount('#app')

// App.vue
<template>
  <div>
    <!-- 显示 count 的值 -->
    <p>{
    
    {
    
     count }}</p>
    <!-- 点击 + 按钮，触发 increment 动作 -->
    <button @click="increment">+</button>
    <!-- 点击 - 按钮，触发 decrement 动作 -->
    <button @click="decrement">-</button>
  </div>
</template>

<script>
export default {
    
    
  // 计算 count 的值
  computed: {
    
    
    count () {
    
    
      return this.$store.getters.count
    }
  },
  methods: {
    
    
    // 触发 increment 动作
    increment () {
    
    
      this.$store.dispatch('increment')
    },
    // 触发 decrement 动作
    decrement () {
    
    
      this.$store.dispatch('decrement')
    }
  }
}
</script>

Kommunikation zwischen Komponenten mit Vuex

Die Vuex-Methode zur Kommunikation zwischen Vue-Komponenten wird durch die Vuex-Statusverwaltungsbibliothek implementiert. Es ermöglicht uns, den Anwendungsstatus an einem einzigen Ort zu verwalten und diesen Status für alle Komponenten zu teilen. Hier ist ein einfaches Beispiel, das zeigt, wie Vuex für die Kommunikation zwischen zwei Komponenten verwendet wird:

1. Erstellen Sie zunächst eine Datei „store.js“ im Verzeichnis src, um einen Vuex-Store zu erstellen.

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

Vue.use(Vuex)

export default new Vuex.Store({
    
    
  //state：存储应用程序的状态，通常是一个对象。
  state: {
    
    
    message: ''
  },
  //mutations：修改state的唯一途径，它们是同步的事务。
  mutations: {
    
    
    setMessage(state, payload) {
    
    
      state.message = payload
    }
  },
  //actions：提交mutations，但是可以包含任意异步操作。
  actions: {
    
    
    setMessage(context, payload) {
    
    
      context.commit('setMessage', payload)
    }
  },
  //getters：对state进行派生，通常是一些计算属性。
  getters: {
    
    
    getMessage(state) {
    
    
      return state.message
    }
  }
})

2. Stellen Sie den Store in den Komponenten vor, die Vuex verwenden müssen.

import store from '@/store'

3. Lösen Sie die Aktion in Vuex in der sendenden Komponente aus, um den Wert im Status zu aktualisieren.

<template>
  <div>
    <input type="text" v-model="message">
    <button @click="setMessage">Send</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      message: ''
    }
  },
  methods: {
    
    
    setMessage() {
    
    
      this.$store.dispatch('setMessage', this.message)
    }
  }
}
</script>

4. Erhalten Sie den Wert in Vuex über die berechnete Eigenschaft in der empfangenden Komponente.

<template>
  <div>
    <p>Received message: {
    
    {
    
     message }}</p>
  </div>
</template>

<script>
export default {
    
    
  computed: {
    
    
    message() {
    
    
      return this.$store.getters.getMessage
    }
  }
}
</script>

In diesem Beispiel erstellen wir eine Statuseigenschaft namens message und definieren eine Mutation namens setMessage, um den Wert der Eigenschaft zu aktualisieren. Wir definieren außerdem eine Aktion namens „setMessage“, um die Mutation zu übermitteln, damit wir sie von der sendenden Komponente aus aufrufen können.

In der Sendekomponente binden wir den Wert der Nachricht an ein Texteingabefeld und erstellen eine Methode namens setMessage, die mithilfe der Dispatch-Methode eine Vuex-Aktion zum Aktualisieren des Statuswerts auslöst.

In der empfangenden Komponente verwenden wir eine berechnete Eigenschaft, um den Wert in Vuex abzurufen, damit wir ihn in der Vorlage anzeigen können.