Artikelverzeichnis
1. Zustand
1.1 Zustandsverwendung
Nach der Einführung von vuex müssen wir Variablen im Zustand definieren, ähnlich wie die Daten in vue, um den Zustand durch den Zustand zu speichern
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//存放状态
nickname:'Simba',
age:20,
gender:'男'
},
mutations: {
},
actions: {
},
modules: {
}
})
Registrieren Sie zwei Komponenten und führen Sie sie jeweils in app.vue ein
<div id="app">
<vabout> </vabout>
<vhome> </vhome>
</div>
Inhalt der vhome-Komponente
<div class="home">{
{
$store.state.nickname}}</div>
vüber Komponenteninhalt
<h1>{
{
$store.state.nickname}}:{
{
$store.state.age}}</h1>
Wie in der Abbildung zu sehen, wird der entsprechende Inhalt angezeigt.Bei vuex müssen wir uns nicht um die Wertübertragung zwischen Komponenten kümmern, wir können verschiedene Daten direkt über $store beziehen, aber wenn wir zu diesem Zeitpunkt mehrere Daten in vuex benötigen, Dies ist zu ausführlich, um es zu schreiben, wir können es in berechnet definieren.
Die Initialisierung von Requisiten, Methoden, Daten und Berechnungen erfolgt zwischen beforeCreated und created.
Beispiel:
<template>
<div class="home">
{
{
nickname}}
</div>
</template>
<script>
export default {
name: 'home',
computed:{
nickname(){
return this.$store.state.nickname
}
}
}
Dies erleichtert den Import erheblich.
1.2 MapState-Hilfsfunktion
Obwohl die Methode in 1.1 einfach einzuführen ist, gibt es immer noch eine Menge Code, der in computed definiert ist, und zu diesem Zeitpunkt stellt uns vuex eine einfachere Methode mapState method zur Verfügung
import {
mapState} from 'vuex'
export default {
name: 'home',
computed: mapState(['nickname','age','gender'])
}
in
mapState(['nickname','age','gender']) //映射哪些字段就填入哪些字段
Dieser Code entspricht dem folgenden
nickname(){
return this.$store.state.nickname}
age(){
return this.$store.state.age}
gender(){
return this.$store.state.gender}
Denken Sie daran: Bei der Verwendung von Hilfsfunktionen wie mapState sind der vorherige Methodenname und der erworbene Eigenschaftsname identisch.
Was ist, wenn wir eine berechnete Eigenschaft anpassen müssen? Wie füge ich es hinzu?
Immerhin wird jetzt berechnet: mapState(['nickname','age','gender'])
Zu diesem Zeitpunkt brauchen wir den Spread-Operator in es6:…
computed: {
//computed是不能传参数的
value(){
return this.val/7
},
...mapState(['nickname','age','gender'])
}
Zwei, Getter
2.1 Die Verwendung von Gettern
Getter entsprechen den berechneten Eigenschaften in Vue. Die weitere Verarbeitung erfolgt über Getter, um den gewünschten Wert zu erhalten, und Parameter sind zulässig. Der erste Parameter ist state.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//存放状态
nickname:'Simba',
firstname:'张',
lastname:'三丰',
age:20,
gender:'男',
money:1000
},
getters:{
realname(state){
return state.firstname+state.lastname
},
money_us(state){
return (state.money/7).toFixed(2)
}
},
mutations: {
},
actions: {
},
modules: {
}
})
Teil sehen
computed: {
//computed是不能传参数的
valued(){
return this.value/7
},
...mapGetters(['realname','money_us'])
}
3. Mutation
3.1 Verwendung von Mutationen
Wir brauchen einige Mutationen, wenn wir in unserem Code definieren, was den Methoden in vue ähnelt,
Mutationen müssen die darin enthaltene Methode per Commit aufrufen. Sie kann auch Parameter übergeben. Der erste Parameter ist state und der zweite Parameter ist payLoad, was ein zusätzlicher Parameter ist.
Code zeigen wie unten
mutations: { //类似于methods
addAge(state,payLoad){
state.age+=payLoad.number
}
}
Vorlagenabschnitt
<div class="home">
<div><button @click="test">测试</button></div>
</div>
js-Teil
methods:{
test(){
this.$store.commit('addAge',{
number:5
})
}
}
Beim Aufruf schreiben Sie den zweiten Parameter am besten in Form eines Objekts, damit wir mehr Informationen übergeben können.
Allerdings wird das Schreiben auf diese Weise immer noch auf das gleiche Problem stoßen, das heißt, wenn Sie mehrere Daten manipulieren müssen, wird es problematisch.Zu diesem Zeitpunkt benötigen wir mapMutations, um die Methode durch sie abzubilden.
3.2 Kartenmutationen
Dasselbe wie mapState, mapGetters
methods:{
...mapMutations(['addAge'])
}
Der Satz mapMutations(['addAge']) entspricht dem folgenden Code
addAge(payLoad){
this.$store.commit('addAge',payLoad)
}
Parameter, die wir schreiben können, wenn wir diese Methode aufrufen
<button @click="addAge({number:5})">测试</button>
Zu diesem Zeitpunkt werden einige Gangster sagen, warum sollte ich herumgehen und den Zustand der Mutationen ändern? Kann ich den Status direkt ändern?
Zum Beispiel:
addAge(){
this.$store.state.age +=5;
}
Sie können die Ergebnisse tatsächlich sehen, also warum sollte ich von Mutationen übertragen?
Die Gründe dafür sind folgende:
① Es ist nicht nur möglich, Zuweisungsoperationen
in Mutationen durchzuführen ② Der Autor hat eine ähnliche Operation mit vergrabenen Punkten in Mutationen durchgeführt.Wenn Sie von Mutationen aus operieren, kann sie erkannt werden, was mit Debugging einfacher zu debuggen ist Tools und Debugging-Tools können Änderungen in Echtzeit erkennen, und das direkte Ändern der Attribute im Status kann nicht in Echtzeit überwacht werden
Hinweis: Mutationen können nur synchrone Methoden schreiben, keine asynchronen wie axios, setTimeout usw. Diese können nicht geschrieben werden Die Hauptfunktion von Mutationen besteht darin, den Zustand zu ändern.
Der Grund ist ähnlich: Wenn Sie asynchron in Mutationen schreiben, kann es erfolgreich angepasst werden, aber weil es asynchron ist, kann es nicht von Debugging-Tools verfolgt werden. Es wird nicht empfohlen, auf diese Weise zu schreiben, was dem Debugging nicht förderlich ist ist die offizielle Vereinbarung.
3.3 Verwenden Sie Konstanten anstelle von Mutationsereignistypen
Konvertieren Sie den ursprünglichen Methodennamen von einer Zeichenfolge in eine Konstante
Code zeigen wie folgt:
import Vue from 'vue'
import Vuex from 'vuex'
export const ADD_AGE ='addAge'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//存放状态
nickname:'Simba',
firstname:'张',
lastname:'三丰',
age:20,
gender:'男',
money:1000
},
getters:{
//类似于 computed
realname:state =>state.firstname+state.lastname,
money_us(state){
return (state.money/7).toFixed(2)
}
},
mutations: {
//类似于methods
[ADD_AGE](state,payLoad){
state.age+=payLoad.number
}
},
actions: {
},
modules: {
}
})
Definieren Sie den Namen der Methode addAge als Konstante und importieren Sie diese direkt beim Aufruf
import {
ADD_AGE} from '../store'
import {
mapMutations} from 'vuex'
export default {
methods:{
...mapMutations([ADD_AGE])
}
}
Der Vorteil, so zu schreiben:
① Es ist nicht einfach, Fehler zu schreiben, die Zeichenfolge kann leicht falsch geschrieben werden, und die falsche Position wird nicht gemeldet, nachdem die Zeichenfolge falsch geschrieben wurde, aber sie wird durch eine Konstante ersetzt. Wenn sie falsch ist, kann eslint das Falsche hervorrufen Position
Beim Ersetzen von Mutationen durch Konstanten können wir eine neue Datei (mutation_type.js) erstellen, um diese Konstanten zu speichern
mutation_type.js-Abschnitt
export default {
ADD_AGE: ‘addAge’
}
Importieren Sie es dann in store/index.js
import MUTATION_TYPES from ‘./mutation_type’（先引入）
export let MUTATION_TYPE=MUTATION_TYPES （再导出）
An dieser Stelle gibt es eine Grube, kombinieren Sie Import und Export nicht in einer Codezeile: so
export {
foo, bar } from 'my_module';
// 可以简单理解为
import {
foo, bar } from 'my_module';
export {
foo, bar };
Anzumerken ist, dass beides nicht dasselbe ist: foo und bar werden, nachdem sie in einer Zeile geschrieben wurden, nicht wirklich in das aktuelle Modul importiert, sondern sind gleichbedeutend mit der Weiterleitung dieser beiden Schnittstellen nach außen, so dass das aktuelle Modul dies nicht kann Verwenden Sie direkt foo und bar.
Teil sehen
import {
MUTATION_TYPE} from '../store'
methods:{
...mapMutations([MUTATION_TYPE.ADD_AGE])
}
Zusammenfassend:
① Verlassen Sie sich auf den Zustand, um neue Daten zu erhalten, verwenden Sie Getter (wie berechnet, nur lesbar)
② Um den Attributwert des Zustands zu ändern, verwenden Sie Mutationen (synchrone Operation)
Vier, Aktionen
4.1 Aktion ist Mutation ähnlich
Unterschied: Aktion kann Mutationsaktion einreichen
und Zustand nicht direkt ausführen, sondern Mutation ausführen
Aktion enthält asynchrone Operationen, ähnlich wie Axios-Anforderungen, die in Aktion geschrieben werden können
Die in Aktion befindlichen Methoden sind standardmäßig asynchron und geben Zusagen zurück
Code zeigen wie unten
Shop-Bereich
actions: {
getUserInfo(){
return {
nickname:'Simba',
age:20
}
}
}
Definieren Sie eine Methode in Aktionen: getUserInfo, und geben Sie ein Objekt zurück
Teil sehen
created(){
var res = this.getUserInfo()
console.log(res)
},
methods:{
...mapActions(['getUserInfo'])
}
Rufen Sie diese Methode in created auf, weisen Sie das Ergebnis res zu, drucken Sie res und geben Sie Promise als Ergebnis aus
Dies zeigt, dass die Methoden in Aktionen standardmäßig asynchron sind und dann Daten übertragen
mapActions(['getUserInfo']) entspricht dem folgenden Code
getUserInfo(){
return this.$store.dispatch(‘getUserInfo’)
}
In der aktuellen Entwicklung ist der Attributwert im Zustand leer, nach dem Einloggen werden die entsprechenden Informationen abgerufen.
Nach der Anmeldung müssen Sie Benutzerinformationen abrufen, wie erhalten Sie diese?
Rufen Sie zuerst die getUserInfo-Methode in Aktionen auf, wenn Sie die Seite betreten
Code zeigen wie unten
Teil sehen
created(){
this.getUserInfo()}
methods:{
...mapActions([‘getUserInfo’])}
Shop-Bereich
Wenn Sie die Daten erhalten möchten, ist dies zunächst gleichbedeutend mit der Zuweisung eines Werts an den Zustand.Das erste, was Ihnen in den Sinn kommt, ist, den Zustand mit Mutationen zu manipulieren, aber die angeforderten Schnittstellen sind alle asynchron mit Axios, also Sie können keine Mutationen, sondern Aktionen verwenden, und Aktionen verwenden, um Mutationen zu manipulieren, um den Zustand zu manipulieren.
export default new Vuex.Store({
state: {
nickname:‘’,
age:0,
gender:'',
money:0
},
mutations: {
setUerInfo(state,payLoad){
state.nickname = payLoad.nickname
state.age = payLoad.age
state.gender = payLoad.gender
state.money = payLoad.money
}
},
actions: {
//actions没有提供state当参数
async getToken({
commit}){
var res = await axios.get('/token接口')
commit('setToken',res)
},
async getUserInfo(context){
//context可以理解为它是整个Store的对象.类似于this.$store，他里面包含了state，getter，mutations，actions
const res = await axios.get('/接口url')
context.commit('setUerInfo',res)
//相当于 this.$store.commit,第一个参数是方法名，第二个参数是要传入的数据
context.dispatch('getToken')
//actions也可以调用自己的其他方法
},
}
})
Geben Sie im laufenden Prozess nach dem Aufrufen der getUserInfo-Methode Aktionen ein und rufen Sie dann setUserInfo über commit auf, übergeben Sie res (Benutzerinformationen) als Parameter und weisen Sie state den entsprechenden Attributwert zu, um die Operation dieses Prozesses abzuschließen.
Die Parameter von getUserInfo können auch destrukturiert werden, was bequemer ist
async getUserInfo({
commit,dispatch}){
const res = await axios.get('/接口url')
commit('setUerInfo',res)
dispatch('getToken')
}