Einführung in die Vue-Grundlagen: Installation und Verwendung von Vuex

Inhaltsverzeichnis

1. Was ist vuex
2. Installation und Einführung
3. Verwendung von vuex
4. Prozesseinführung
5. Mutation
6. Getter-Filterung
7.Aktion - Asynchrone Verarbeitung
8.Modul
Zusammenfassen

Dieses Tutorial ist ein Einführungstutorial. Wenn Fehler vorhanden sind, weisen Sie bitte darauf hin.

1. Was ist vuex

Vuex ist ein speziell für Vue.js-Anwendungen entwickeltes Zustandsverwaltungsmuster. Es 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. Detaillierte Informationen finden Sie im offiziellen Website-Dokument vuex.vuejs.org/zh/

Nachfolgend finden Sie eine kurze Einführung in vuex

2. Installation und Einführung

Installieren Sie zuerst vuex.

npm installiere vuex --save

Es kann verwendet werden, nachdem es in main.js eingeführt wurde.

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//vuex verwendet import Vuex von 'vuex'

Vue.Verwenden(Vuex)
const store = neuer Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 31231
    }
})

Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

3. Verwendung von vuex

<Vorlage>
<div>
      Der Chef hat {{showData}}
      <HalloWelt2/>
</div>
</Vorlage>

<Skript>
importiere HelloWorld2 aus './HelloWorld2'
Sohn aus './son' importieren

Standard exportieren {
Name: "Hallo Welt",
Daten () {
  zurückkehren {
       Nachricht2:"",
       cou
    }
},
Komponenten: {
  HalloWelt2,
  Sohn
},berechnet: {
  zeigeDaten(){
    gib dies zurück.$store.state.count;
  }
}
}

</Skript>

<Vorlage>
<div>
Der zweite hat {{$store.state.count}}
</div>
</Vorlage>

<Skript>
Standard exportieren {
Name: 'HelloWorld2',
Daten() {
      zurückkehren {
      }
    }
}
</Skript>

4. Prozesseinführung

Wie in der Abbildung gezeigt, lautet der Prozess, wenn vuex nicht verwendet wird: Ansicht->Aktionen->Status->Ansicht

Nach der Verwendung von Vuex lautet der Prozess Vuecomponent->(Dispatch)Actions->(Commit)Mutations->(Mutate)State->(Render)->Vuecomponent

5. Mutation

Statusänderungen. Die einzige Möglichkeit, den Status im Vuex-Store zu ändern, besteht darin, eine Mutation zu übermitteln. Mutationen in Vuex sind Ereignissen sehr ähnlich: Jede Mutation hat einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler). Mit dieser Rückruffunktion nehmen wir tatsächlich die Statusänderung vor und sie erhält den Status als erstes Argument.

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//vuex verwendet import Vuex von 'vuex'

Vue.Verwenden(Vuex)
const store = neuer Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 31231
    },
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    }
})

Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

Führen Sie dann die Änderung durch

<Vorlage>
<div>
      Der Chef hat {{showData}}
      <HalloWelt2/>
      <button type = "button" v-on:click = "changeData"> Schaltfläche ändern</button>
</div>
</Vorlage>

<Skript>
importiere HelloWorld2 aus './HelloWorld2'
Sohn aus './son' importieren

Standard exportieren {
Name: "Hallo Welt",
Daten () {
  zurückkehren {
       Nachricht2:"",
    }
},
Komponenten: {
  HalloWelt2,
  Sohn
},berechnet: {
  zeigeDaten(){
    gib dies zurück.$store.state.count;
  }
},
Methoden: {
  //Änderungen ausführen changeData(event){
      dies.$store.commit("addData");
  }
}
}

</Skript>

6. Getter-Filterung

Sie können Mutationen begrenzen. Wenn die Mutation beispielsweise kleiner als 0 ist, kann sie nicht reduziert werden.

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//vuex verwendet import Vuex von 'vuex'

Vue.Verwenden(Vuex)
const store = neuer Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 0
    },
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    },
    //Filtergetter: {
        getState(Zustand) {
            wenn (Zustand.Anzahl >= 5) {
                Rückkehr 5
            } anders {
                Statusanzahl zurückgeben
            }
        }
    }
})

Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

Beim Anrufen

<Vorlage>
<div>
Der zweite hat {{$store.getters.getState}}
</div>
</Vorlage>

<Skript>
Standard exportieren {
Name: 'HelloWorld2',
Daten() {
      zurückkehren {
      }
    }
}
</Skript>

7.Aktion - Asynchrone Verarbeitung

Die Aktion ähnelt der Mutation, außer dass:

Die Aktion übermittelt eine Mutation, anstatt den Status direkt zu ändern. Die Aktion kann beliebige asynchrone Vorgänge enthalten. Mutationen können nur synchron verarbeitet werden
Haupt-JavaScript: Hier ist ein Beispiel:

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//vuex verwendet import Vuex von 'vuex'

Vue.Verwenden(Vuex)
const store = neuer Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 0
    },
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    },
    //Filtergetter: {
        getState(Zustand) {
            wenn (Zustand.Anzahl >= 5) {
                Rückkehr 5
            } anders {
                Statusanzahl zurückgeben
            }
        }
    },
    Aktionen: {
        //Der Vorteil der aktionsgesteuerten Mutationsmethode ist die asynchrone Verarbeitung addData(context) {
            //Asynchron simulieren setTimeout(() => {
                Kontext.commit('Daten hinzufügen')
            }, 1000)
        }
    }
})

Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

Aktion soll beim Senden aufgerufen werden.

<Vorlage>
<div>
      Der Chef hat {{showData}}
      <HalloWelt2/>
      <button type = "button" v-on:click = "changeData"> Schaltfläche ändern</button>
</div>
</Vorlage>

<Skript>
importiere HelloWorld2 aus './HelloWorld2'
Sohn aus './son' importieren

Standard exportieren {
Name: "Hallo Welt",
Daten () {
  zurückkehren {
       Nachricht2:"",
    }
},
Komponenten: {
  HalloWelt2,
  Sohn
},berechnet: {
  zeigeDaten(){
    gib dies zurück.$store.getters.getState;
  }
},
Methoden: {
  //Änderungen ausführen changeData(event){
      //Operationsmutationsmethode //this.$store.commit("addData");
      //Die Aktion soll anstelle der durch die Aktion ausgelösten Mutationsmethode ausgeführt werden this.$store.dispatch("addData");

  }
}
}

</Skript>

8.Modul

Durch die Verwendung eines einzelnen Zustandsbaums werden alle Anwendungszustände in einem großen Objekt zentralisiert. Wenn Ihre Anwendung sehr komplex wird, kann das Store-Objekt ziemlich aufgebläht werden.

Um die oben genannten Probleme zu lösen, ermöglicht uns Vuex, den Store in Module aufzuteilen. Jedes Modul hat seinen eigenen Status, seine eigene Mutation, Aktion, Getter und sogar verschachtelte Untermodule – von oben nach unten immer gleich aufgeteilt:

Wenn die Route aufgeteilt werden kann, wird die Datei nicht in main.js, sondern in vuex abgelegt. Erstellen Sie eine neue store/index.js

//vuex verwendet import Vue von 'vue'
Vuex von „vuex“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
    Zustand: {
        //Anzahl globaler Variablen: 0
    },
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    },
    //Filtergetter: {
        getState(Zustand) {
            wenn (Zustand.Anzahl >= 5) {
                Rückkehr 5
            } anders {
                Statusanzahl zurückgeben
            }
        }
    },
    Aktionen: {
        //Der Vorteil der aktionsgesteuerten Mutationsmethode ist die asynchrone Verarbeitung addData(context) {
            //Asynchron simulieren setTimeout(() => {
                Kontext.Commit('Daten hinzufügen')
            }, 1000)
        }
    }
})

Ändern Sie main.js

// Die Vue-Build-Version, die mit dem Befehl „import“ geladen werden soll
// (nur Laufzeit oder Standalone) wurde in webpack.base.conf mit einem Alias festgelegt.
Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
Store aus „./store“ importieren


Vue.config.productionTip = falsch
    /* eslint-deaktivieren Sie no-new */
neuer Vue({
    el: '#app',
    Router,
    //vuex muss zum Store hinzugefügt werden,
    Komponenten: { App },
    Vorlage: '<App/>'
})

Wir können auch den Status in main.js übernehmen und einen neuen store/state.js erstellen

Standard exportieren {
    Anzahl: 0
}

Dann kann index.js geändert werden in

//vuex verwendet import Vue von 'vue'
Vuex von „vuex“ importieren
Status aus „./state“ importieren

Vue.Verwenden(Vuex)

exportiere standardmäßig neuen Vuex.Store({
    Staat: Staat,
    //Statusänderungsmethode Mutationen: {
        //state ist der obige Status
        addData(Status) {
            //Zustand ändern state.count++
        }
    },
    //Filtergetter: {
        getState(Zustand) {
            wenn (Zustand.Anzahl >= 5) {
                Rückkehr 5
            } anders {
                Statusanzahl zurückgeben
            }
        }
    },
    Aktionen: {
        //Der Vorteil der aktionsgesteuerten Mutationsmethode ist die asynchrone Verarbeitung addData(context) {
            //Asynchron simulieren setTimeout(() => {
                Kontext.commit('Daten hinzufügen')
            }, 1000)
        }
    }
})

Zusammenfassen

Dies ist das Ende dieses Artikels über die Installation und Verwendung von Vuex für Vue-Anfänger. Weitere Informationen zur Installation und Verwendung von Vuex finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Die ausführlichste Zusammenfassung der Vuex-Einführung
Vuex-Schnellstart (leicht verständlich)
Vuex-Tutorial für die ersten Schritte
Einfache Vuex-Einführung in drei Schritten
Vuex-Tutorial für die ersten Schritte
Lernen Sie in wenigen Minuten die Anwendung von Vuex in Vue (Anfänger-Tutorial)
Einfache Einführung in Vuex
Vue.js Praktisches Vuex-Tutorial zum Einstieg
Erste Schritte mit Vuex

<<: Implementierung von zwei Basis-Images für die Docker-Bereitstellung von Go

>>: Schritte zum Ändern des MySQL-Datenbankdatendateipfads unter Linux

Lösung für vergessenes Linux MySQL-Root-Passwort

Einführung in die Vue-Grundlagen: Installation und Verwendung von Vuex

Inhaltsverzeichnis

1. Was ist vuex

2. Installation und Einführung

3. Verwendung von vuex

4. Prozesseinführung

5. Mutation

6. Getter-Filterung

7.Aktion - Asynchrone Verarbeitung

8.Modul

Zusammenfassen

Lösung für vergessenes Linux MySQL-Root-Passwort

Beispiel für eine dynamische Sperre der IP-Blacklist von Nginx

Detaillierte Erklärung zum effizienten MySQL-Paging

Fragen zum Vorstellungsgespräch zu JS 9 Promise

Detaillierte Erklärung zum manuellen Hochladen von Excel-Dateien auf den Server mit Vue ElementUI

Empfehlen Sie mehrere MySQL-bezogene Tools

Fehler beim reduzierten Tabellenzeilenelement

Installationsprozess von Zabbix-Agent auf Kylin V10

Allgemeine Textverarbeitungsbefehle unter Linux und Vim-Texteditor

Tutorial zum Bereitstellen eines Springboot-Pakets in einer Linux-Umgebung mithilfe von Docker

Artikel empfehlen

Beispiele für neue Selektoren in CSS3

Detaillierte Erläuterung des Rundungsgenauigkeitsproblems der toFixed () -Methode in JS

So verwenden Sie die Lodop-Drucksteuerung in Vue, um browserkompatibles Drucken zu erreichen

Nach dem Docker-Lauf ist der Status immer „Beendet“

vue+el-upload realisiert den dynamischen Upload mehrerer Dateien

Der HTML 5-Entwurf wurde kein formeller Standard

Reines JavaScript zur Implementierung des Zahlenratespiels

MySQL 8.0.17 Installations- und einfaches Konfigurationstutorial unter macOS

So implementieren Sie die automatische Ansible-Installation und -Konfiguration von httpd im Linux-System

Eine sehr detaillierte Erklärung des Linux DHCP-Dienstes

MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]

Detaillierte Erklärung der Lösung zur Migration von Antd+React-Projekten nach Vite

Linux-Datenträgerverwaltung – LVM-Nutzung

Das vergessene Button-Tag

Erkennen Sie den CSS-Ladeeffekt nach dem Klicken auf die Schaltfläche