Vuex in einem Artikel verstehen

Überblick

Vuex ist ein speziell für Vue.js-Anwendungen entwickelter Statusverwaltungsmodus (offizielle Website-Adresse: https://vuex.vuejs.org/zh/). Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen.

Im Klartext: Vuex ist ein Statusverwaltungsmodus, der einfach als globales Objekt verstanden werden kann. Dann können wir die Eigenschaften ändern oder Methoden in diesem globalen Objekt hinzufügen, aber wir können es nicht in der direkten Zuweisungsform von traditionellem JS ändern. Wir müssen es gemäß den von Vuex bereitgestellten Regeln ändern.

Die Existenz von Vuex wird genutzt, um das Problem der Wertübertragung zwischen Komponenten zu lösen. Um es ganz klar auszudrücken: Es geht darum, die Vorteile zu sehen, die uns die Probleme und Nachteile der Wertübertragung zwischen unseren traditionellen Vue-Eltern-Kind-Komponenten bringen. Dies wird auf der offiziellen Website klar dargelegt:

Tipp: In diesem Artikel wird Vuex in Form von Modulimport und -export verwendet. Dieser Artikel ist etwas lang. Ich hoffe, Sie lesen ihn geduldig. Wenn Sie die Voraussetzungen erfüllen, ist der Effekt natürlich besser, wenn Sie ihn befolgen!

Die vier Hauptobjekte von Vuex

Dies sind Zustände, Mutationen, Getter und Aktionen.

state: Die Datenquelle in Vuex. Alle öffentlichen Daten, die wir brauchen, sind hier gespeichert. Es kann einfach als transparentes Lager verstanden werden. Auf die Datenquelle in diesem Lager kann über den Variablennamen this.$store.state. zugegriffen werden.

Mutationen: Mutationen entsprechen dem Schlüssel dieses Lagers. Nur durch das Senden von Mutationen kann die Datenquelle geändert werden. Mit anderen Worten, wenn Sie die Daten in diesem Lager ändern möchten, können Sie sie nur durch Mutationen ändern (this.$store.commit("Methodenname"));

Getter: Getter ähneln berechneten Eigenschaften in Vue. Der Rückgabewert von Gettern ändert sich entsprechend der Statusänderung des im Status abhängigen Werts. Wenn sich der Wert im Status, von dem Getter abhängen, nicht geändert hat, wird der Cache direkt gelesen. Wenn eine Änderung vorliegt, treten auch hier entsprechende Änderungen auf, mit denen die Änderung des Statuswerts überwacht werden kann. Die Getter können hier als Sicherheitsbeamte des Statuslagers verstanden werden. Wenn sich die Daten des Status ändern, ergreift der Sicherheitsbeamte entsprechende Maßnahmen, um entsprechende Änderungen vorzunehmen. Wenn sich nichts ändert, passiert nichts und Sie essen weiter und warten auf den Tod (hahaha, ich weiß nicht, ob die Metapher angemessen ist, aber das ist die Bedeutung. Verstehen Sie es einfach, streiten Sie nicht)

Aktionen: Aktionen sind Mutationen sehr ähnlich, aber Mutationen dürfen offiziell nur synchron ausgeführt werden, während Aktionen asynchron ausgeführt werden können. Das heißt, wir müssen in Aktionen asynchrone Vorgänge ausführen, und Aktionen übermitteln Mutationen, anstatt den Status direkt zu ändern. Das heißt, um das Lager zu betreten und Daten zu ändern, müssen Sie zuerst den Schlüssel abrufen, bevor Sie sie ändern können. Daher werden Aktionen an Mutationen übermittelt und führen dann die Mutationsmethode aus:

Verwendung des Staates

Zuerst erstellen wir ein neues Projekt und bauen die Vue-Umgebung auf. Wir werden hier nicht ins Detail gehen. Schließlich geht es in diesem Artikel um Vuex. Installieren Sie Vuex zunächst im Projekt:

Befehl zum Installieren von Vuex: npm install vuex --save

Nach der Installation von Vuex erstellen wir einen neuen Vuex-Ordner im src-Verzeichnis und erstellen eine neue store.js-Datei im Vuex-Ordner:

Laden Sie die Datei store.js herunter:

importiere Vue von „vue“;
importiere Vuex von „vuex“;


Vue.use(Vuex);
konstanter Zustand = {
  Nummer:1
}

exportiere standardmäßig neuen Vuex.Store({
  Zustand,
})

Dann verweisen wir auf store.js in main.js und fügen das Store-Objekt hinzu, wenn das Objekt instanziiert wird

Haupt-JS

Vue von „vue“ importieren
App aus „./App“ importieren
Router aus „./router“ importieren
//Referenz store.js
Store aus „./vuex/store“ importieren

Vue.config.productionTip = falsch


/* eslint-deaktivieren Sie no-new */
neuer Vue({
  el: '#app',
  Router,
//Fügen Sie den Store-Objektspeicher beim Instanziieren hinzu,
  Komponenten: { App },
  Vorlage: '<App/>'
})

Ändern Sie dann unsere App.vue-Datei

App.vue

<Vorlage>
  <div id="app">
    <img src="./assets/logo.png">
// Fügen Sie der Ansichtsebene Daten zur einfacheren Beobachtung hinzu<p>{{this.$store.state.number}}</p>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

Aus dem obigen Code können wir ersehen, dass wir in App.vue ein p-Tag hinzugefügt haben. Vuex legt fest, dass wir, wenn wir die Daten in Vuex lesen müssen, also das Datenquellen-Warehouse des Status, über den Variablennamen this.$store.state darauf zugreifen müssen.

Verwendung von Mutationen

Wenn wir die Datenquelle in Vuex ändern müssen, können wir sie durch das Senden von Mutationen ändern.

Zuerst müssen wir unserer Ansichtsebene eine Schaltfläche hinzufügen, um Folgendes zu steuern:

App.js

<Vorlage>
  <div id="app">
    <img src="./assets/logo.png">
    <p>{{$store.state.number}}</p>
    //Fügen Sie eine Schaltfläche hinzu, um ein Ereignis zum Ändern der Datenquelle auszulösen <button @click="add">button</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Methoden:{
    hinzufügen(){
    //Um die Datenquelle zu ändern, müssen Sie die von vuex angegebene Methode verwenden: this.$store.commit('addFunction');
    }
  }
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>
    

Ändern Sie dann unsere store.js:

importiere Vue von „vue“;
importiere Vuex von „vuex“;


Vue.use(Vuex);
konstanter Zustand = {
  Nummer:1
}

// Mutationsobjekt hinzufügen, der Statusparameter kann den obigen Status abrufen
const Mutationen = {
  Funktion hinzufügen(Zustand){
    gebe Status.Nummer+=1 zurück;
  }
}

//Stellen Sie sicher, dass Sie es hier der Instanz hinzufügen, da sonst ein Fehler gemeldet wird export default new Vuex.Store({
  Zustand,
  Mutationen
})

Wir können intuitiv erkennen, dass Mutationen übermittelt werden, um die Datenquelle über this.$store.commit('Methodenname') zu ändern. Natürlich können unsere Mutationen auch Parameter empfangen. Der erste Parameter ist der Methodenname der Mutation und der zweite Parameter ist der Parameter, den die Mutation empfangen muss. Auf diese Weise werden unsere Mutationen flexibler.

Verwendung von Gettern

Getter ähneln der Computernutzung von Vue. Sie können Datenänderungen im Statusdatenquellen-Warehouse überwachen. Wenn sich die Daten, von denen Getter abhängen, ändern, ändern sich auch die Daten, von denen Getter abhängen, und der Status ändert sich ebenfalls.

Zuerst können wir den folgenden Code in store.js hinzufügen:

importiere Vue von „vue“;
importiere Vuex von „vuex“;


Vue.use(Vuex);
konstanter Zustand = {
  Nummer:1
}

const getter = {
    //Der Zustand wird durch die Methode ausgelöst, die das obige Zustandsobjekt ist, das den Wert des Zustands lesen kann addFunction(state){
    Statusnummer zurückgeben++;
  }
}
exportiere standardmäßig neuen Vuex.Store({
  Zustand,
//Denken Sie daran, beim Instanziieren Objektgetter hinzuzufügen.
})

Wir können die Ansicht in App.vue wie folgt ändern:

<Vorlage>
  <div id="app">
    <img src="./assets/logo.png">
    <p>Seitenwert: {{$store.state.number}}</p>
    //Fügen Sie ein Tag hinzu, um es mit dem Wert der Seite zu vergleichen<p>Der Wert meiner Getter: {{$store.getters.addFunction}}</p>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

Durch den obigen Code und die Ansichtsebene können wir deutlich sehen, dass die Methode addFunction von Gettern ausgelöst wird, wenn wir Getter bedienen. Die Methode addFunction ändert den Wert von state.number. Zu diesem Zeitpunkt ist der Wert von number bereits 2, daher wird der Wert auf der Seite als 2 angezeigt. Da ++ am Ende steht, ist der Wert von Gettern zu diesem Zeitpunkt 1. Das heißt, wenn sich der Wert von state.number ändert, von dem Getter abhängen, ändert sich state.number. Wenn sich state.number nicht ändert, lesen Getter zuerst den Cache.

Verwendung von Aktionen

Das Actions-Objekt führt hauptsächlich asynchrone Operationen aus, die Mutationen ähneln. Der Unterschied besteht darin, dass Actions Daten ändern, indem sie Mutationen übermitteln, anstatt den Datenstatus direkt zu ändern.

Zuerst können wir den Code in store.js ändern:

importiere Vue von „vue“;
importiere Vuex von „vuex“;


Vue.use(Vuex);
konstanter Zustand = {
  Nummer:1
}
const Mutationen = {
  Funktion hinzufügen(Zustand){
    Statusnummer zurückgeben++;
  }
}
const getter = {
  Funktion hinzufügen(Zustand){
    Statusnummer zurückgeben++;
  }
}
//Kontext ist ein Objekt mit denselben Eigenschaften und Methoden wie eine Store-Instanz const actions = {
  Funktion hinzufügen(Kontext){
    Kontext.commit("Funktion hinzufügen");
  }
}
exportiere standardmäßig neuen Vuex.Store({
  Zustand,
  Mutationen,
  Getter,
//Denken Sie daran, beim Instanziieren Aktionen hinzuzufügen
})

Der Code in App.vue wird wie folgt geändert:

<Vorlage>
  <div id="app">
    <img src="./assets/logo.png">
    <p>Seitenwert: {{$store.state.number}}</p>
     <button @click="add">Schaltfläche</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App",
  Methoden:{
    hinzufügen(){
//Verwenden Sie in Aktionen this.$store.dispatch, um Mutationen zur Änderung zu übermitteln this.$store.dispatch("addFunction")
    }
  }
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Textausrichtung: zentriert;
  Farbe: #2c3e50;
  Rand oben: 60px;
}
</Stil>

Anwendbare Szenarien von Vuex

Bei der Projektentwicklung müssen wir möglicherweise viele Daten oder Parameter mehrmals lesen oder ändern, z. B. Einkaufswagen und andere ähnliche Funktionen. Derzeit können wir vuex zur Implementierung verwenden. Schließlich ist vuex nur ein Statusverwaltungsmodus. Der Statusverwaltungsmodus bietet uns Komfort, ist jedoch nicht erforderlich, da die Funktionen der Statusverwaltung auch über andere Kanäle und Methoden erreicht werden können. Tatsächlich denke ich, dass vuex ein wenig ähnlich ist wie localStorage. Beide werden zum Speichern und Ändern von Daten verwendet, um das Problem des seitenübergreifenden Datenverlusts zu lösen.

Der obige Artikel soll Ihnen dabei helfen, die Details von Vuex leicht zu verstehen. Weitere Informationen zu Vuex finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!