So verwenden Sie Vuex im erweiterten Stil

Dieses Mal zeige ich Ihnen, wie Sie Vuex für Fortgeschrittene verwenden und welche Vorsichtsmaßnahmen für die fortgeschrittene Verwendung von Vuex gelten. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

1. Getter

Erinnern wir uns zunächst an den Code im vorherigen Artikel

computed:{
  getName(){
   return this.$store.state.name
  }
}

Angenommen, die Logik hat sich jetzt geändert und die Daten haben wir letztendlich „expect to get (getName)“ basiert auf komplexen Berechnungen auf this.$store.state.name. Dieser getName wird an vielen Stellen verwendet, daher müssen wir mehrere Kopien kopieren.

vuex stellt uns For zur Verfügung Getter, sehen Sie sich bitte den Code an (Dateispeicherort/src/store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed -----------------以下5行为新增
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 }
})

Dann können wir die Datei location/src/main.js so verwenden

computed:{
  getName(){
   return this.$store.getters.getReverseName
  }
}

Tatsächlich Getter ist mehr als nur die Rolle der Kapselung. Er speichert die Ergebnisdaten genau wie das berechnete Attribut von Vue. Nur wenn sich die Abhängigkeit ändert, muss sie neu berechnet werden.

action

s und $dispatchWenn Sie vorsichtig sind, müssen Sie bemerkt haben, dass die Kommentare zum Mutations-Header in meinem vorherigen Code den Methoden (synchronen Methoden) in vue ähneln

Warum sollte es sich um eine synchronisierte Methode handeln? Mutation kann nur eine synchronisierte Funktion sein, kann nur eine synchronisierte Funktion sein!! 🎜>Stellen Sie sich nun vor, wir debuggen eine App und beobachten das Mutationsprotokoll in devtool. Jedes Mal, wenn eine Mutation aufgezeichnet wird, müssen Devtools Schnappschüsse des vorherigen und des nächsten Zustands erfassen. Im obigen Beispiel macht der Rückruf in der asynchronen Funktion in der Mutation dies jedoch unmöglich: Da beim Auslösen der Mutation die Rückruffunktion noch nicht aufgerufen wurde, weiß devtools nicht, wann die Rückruffunktion tatsächlich aufgerufen wurde – im Wesentlichen wurden keine Statusänderungen vorgenommen innerhalb der Callback-Funktion sind nicht auffindbar.

Was ist, wenn wir einen asynchronen Vorgang auslösen möchten? Die Antwort lautet: action + $dispatch, wir ändern weiterhin den Code unter store/index.js

Dateispeicherort/src/store/index. js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
  name: 'oldName'
 },
 // 类似 vue 的 computed
 getters:{
  getReverseName: state => {
    return state.name.split('').reverse().join('')
  }
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
  updateName (state) {
   state.name = 'newName'
  }
 },
 // 类似 vue 里的 mothods(异步方法) -------- 以下7行为新增
 actions: {
  updateNameAsync ({ commit }) {
   setTimeout(() => {
    commit('updateName')
   }, 1000)
  }
 }
})

Dann können wir

methods: {
  rename () {
    this.$store.dispatch('updateNameAsync')
  }
}

in unserer Vue-Seite wie folgt verwenden: Wenn sie größer wird, ist eine einzelne Store-Datei definitiv nicht das, was wir wollen, also gehen wir von Modularisierung aus dass es diese 2 Dateien im src/store-Verzeichnis gibt

moduleA.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

moduleB.js

export default {
  state: { ... },
  getters: { ... },
  mutations: { ... },
  actions: { ... }
}

Dann können wir index.js so ändern, dass es so aussieht

import moduleA from './moduleA'
import moduleB from './moduleB'
export default new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:

Wie man das V-Modell verwendet und verspricht, die Vue-Popup-Komponente zu implementieren

Wie Zur Verwendung von JS wird das Hochladen von Dateien per Drag-and-Drop implementiert

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vuex im erweiterten Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!