Detaillierte Erklärung der Kernkonzepte und der grundlegenden Verwendung von Vuex

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

npm installiere vuex --save

Garn hinzufügen Vuex

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Vue.Verwenden(Vuex)
exportiere standardmäßig neuen Vuex.Store({
Zustand: {},
Mutationen: {},
Aktionen: {},
Module: {}
})

Vue von „vue“ importieren
Store aus „./store“ importieren
neuer Vue({
  rendern: h => h(App),
  speichern
}).$mount('#app')

Zustand: {
  Nummer: 0
}

<div>{{AnzahlAlias ​​​​}}</div>

importiere { mapState } von 'vuex'
Standard exportieren {
  //Berechnungsfunktion berechnet: mapState({
    // Die Übergabe des String-Parameters „count“ entspricht „state => state.count“
    numAlias: 'num', // Der gemeinsame Schlüssel ist ein Name, den Sie selbst vergeben, der Wert sind die Daten, die Sie erhalten // Die Pfeilfunktion kann den Code prägnanter machen count: state => state.count,
    // Um ​​`this` verwenden zu können, um den lokalen Status abzurufen, müssen Sie die reguläre Funktion countPlusLocalState (state) { verwenden.
      returniere state.count + this.localCount
    }
    //Sie können andere Berechnungsfunktionen definieren}),
  //Oder so //Berechnete Funktion berechnet: {
    mapState(['Anzahl'])
  }
}

<div>{{ $store.state.count }}</div>

Mutationen:
	//Inkrementieren Sie die benutzerdefinierte Methode. Der Store-Parameter ist das Speichern von Daten, der Parameter Parameter sind empfangene Daten, nicht inkrementieren (Status, Parameter) {
        // Status ändern state.num++
    }
}

importiere { mapState, mapMutations } von 'vuex'
//Methoden: {
	…mapMutations([
	    // Mutationen, benutzerdefinierter Methodenname „Inkrement“
    ]),
    Liebe() {
    	// Dies ruft direkt this.increment auf ('Die zu übergebenden Daten werden nicht benötigt.')
        this.increment('Bin')
    }
}

Methoden: {
    Liebe() {
    	// this.$store.commit('benutzerdefinierter Name', 'übergebene Daten dürfen nicht übergeben werden')
    	dies.$store.commit('Inkrement', 'Daten')
    }
}

Mutationen:
	//Inkrementieren Sie die benutzerdefinierte Methode. Der Store-Parameter ist das Speichern von Daten, der Parameter Parameter sind empfangene Daten, nicht inkrementieren (Status, Parameter) {
        // Status ändern state.num++
    }
},
Aktionen: {
	//benutzerdefinierte Methode hinzufügen Kontext ist ein Parameter, Sie können ihn als Instanz von vuex add(context) { behandeln.
    	//Sie können context.commit('Methode, die in Mutationen aufgerufen werden soll') verwenden.
    	Kontext.commit('Inkrement')
    }
}

importiere { mapState, mapMutations, mapActions } von 'vuex'
Standard exportieren {
  Methoden: {
    ...mapActions([
      'add', // Ordnen Sie `this.add()` `this.$store.dispatch('add')` zu.
      // `mapActions` unterstützt auch Payloads:
      „add“ // ordnet „this.add(amount)“ „this.$store.dispatch(„add“, amount)“ zu.
    ]),
    ...mapActions({
      hinzufügen: 'add' // Ordnen Sie `this.add()` `this.$store.dispatch('increment')` zu
    }),
    Liebe() {
    	// Rufen Sie this.add direkt auf ('Die zu übergebenden Daten werden nicht benötigt.')
    	dies.add(Daten)
    }
  }
}

Methoden: {
    Liebe() {
    	// this.$store.dispatch('benutzerdefinierter Name', 'übergebene Daten dürfen nicht übergeben werden')
    	this.$store.dispatch('Hinzufügen', Daten)
    }
}

Zustand: {
  Nummer: 0
},
Getter: {
    erledigtTodos: status => {
    	Rückgabewert: state.num = 10
    }
}

<div>{{ erledigtAlle }}</div>

importiere { mapState, mapMutations, mapActions, mapGetters } von 'vuex'
Standard exportieren {
  //Berechnungsfunktion berechnet: {
  	...mapState(['Anzahl']),
  	…mapmapGetters(['erledigtAlles'])
  }
}

<div>{{ $store.getters.doneAlle }}</div>