Was nützt Vuex?

vuex ist eine auf dem Vue-Framework basierende Zustandsverwaltungsbibliothek, die den Datenstatus komplexer Anwendungen verwalten und den Datenaustausch zwischen Komponenten erleichtern kann, z. B. die Kommunikation zwischen Geschwisterkomponenten, die Wertübertragung mehrschichtiger verschachtelter Komponenten usw.; verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und verwendet entsprechende Regeln, um sicherzustellen, dass sich der Status auf vorhersehbare Weise ändert.

Vuex ist ein Zustandsverwaltungsmodell, das speziell für Vue.js-Anwendungen entwickelt wurde. Es handelt sich um eine Zustandsverwaltungsbibliothek, die auf dem Vue-Framework basiert. Es kann den Datenstatus komplexer Anwendungen verwalten und den Datenaustausch zwischen Komponenten erleichtern, z. B. die Kommunikation zwischen Geschwisterkomponenten, die Wertübertragung zwischen mehrschichtigen verschachtelten Komponenten usw.

Vuex verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und stellt mithilfe entsprechender Regeln sicher, dass sich der Status auf vorhersehbare Weise ändert.

Vuex ist auch in Vues offizielles Debugging-Tool devtools-Erweiterung integriert und bietet erweiterte Debugging-Funktionen wie Zeitreise-Debugging ohne Konfiguration, Import und Export von Status-Snapshots usw.

Kernfunktionen in Vuex

(1)State: Stellt die einzige öffentliche Datenquelle bereit, alle freigegebenen Daten müssen im State im Store gespeichert werden

So greifen Sie auf den State in der Komponente zu:

A.this. $store.state. Der globale Datenname lautet wie folgt: this.$store.state.count

B Importieren Sie zunächst die MapState-Funktion nach Bedarf: import {mapState} from 'vuex'

Dann werden die Daten berechnet Attribute: berechnet:{ ...mapState(['global data name']) }

(2) Mutation: wird zum Ändern der Daten in $store

Verwendung:

Öffnen Sie die Datei „store.js“ und fügen Sie Folgendes hinzu Code in Mutationen:

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

Dann fügen Sie den Ereigniscode wie folgt zur Schaltfläche in Addition.vue hinzu:

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit(&#39;add&#39;,10)
  }
}

Die zweite Möglichkeit, Mutationen zu verwenden:

import { mapMutations } from ‘vuex’
methods:{…mapMutations([‘add’])}

wie folgt:

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

(3)Aktion: Asynchron kann nicht In Mutationen geschriebener Code führt zu Anzeigefehlern im Vue-Debugger. In vuex können wir Action verwenden, um asynchrone Vorgänge auszuführen.
Die Schritte sind wie folgt:

Öffnen Sie die Datei „store.js“ und ändern Sie die Aktion wie folgt:

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

Dann fügen Sie den Ereigniscode wie folgt zur Schaltfläche in Addition.vue hinzu:

<button @click="AddAsync">...+1</button>

methods:{
  AddAsync(){
    this.$store.dispatch(&#39;addAsync&#39;,5)
  }
}

(4) Getter: gewohnt verarbeiten die Daten in der Filialverarbeitung zu neuen Daten.

Es werden nur die im Store gespeicherten Daten umschlossen und die im Store gespeicherten Daten nicht geändert. Wenn sich die Daten im Store ändern, ändert sich auch der vom Getter generierte Inhalt entsprechend.
Öffnen Sie die Datei „store.js“ und fügen Sie Getter wie folgt hinzu:

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

Dann öffnen Sie Addition.vue und fügen Sie Interpolationsausdrücke mithilfe von Gettern hinzu

<h3>{{$store.getters.showNum}}</h3>

Sie können MapGetters auch in Addition.vue importieren und sie berechneten Eigenschaften zuordnen

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

Related Empfehlungen:

Zusammenfassung der Fragen zum Front-End-Vue-Interview 2020 (mit Antworten)

Vue-Tutorial-Empfehlungen: Die neuesten 5 Vue.js-Video-Tutorial-Auswahlen für 2020

Weitere Programmierkenntnisse. Weitere Kenntnisse finden Sie unter: Programmierung Unterrichten! !

Das obige ist der detaillierte Inhalt vonWas nützt Vuex?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!