Detaillierte Erläuterung der Vuex-Methode zum Betrieb von Zustandsobjekten

Dieses Mal werde ich Ihnen die Methode zum Betrieb von Zustandsobjekten in Vuex ausführlich erläutern. Was sind die Vorsichtsmaßnahmen beim Betrieb von Zustandsobjekten in Vuex? .

Was ist Vuex?

VueX ist eine Zustandsverwaltungsarchitektur, die speziell für Vue.js-Anwendungen entwickelt wurde und den veränderlichen Zustand jeder Vue-Komponente einheitlich verwaltet und aufrechterhält (Sie können darunter einige Daten in der Vue-Komponente verstehen).

Vue verfügt über fünf Kernkonzepte: Zustand, Getter, Mutationen, Aktionen und Modules.

Zusammenfassung

Status => Basisdaten
Getter => Aus Basisdaten abgeleitete Daten
Mutationen => Methode zum Übermitteln geänderter Daten, synchron!
Aktionen => Wie ein Dekorateur, der Mutationen umhüllt, um sie asynchron zu machen.
modules => ModularisierungVuex

Zustand

Zustand sind die Grunddaten in Vuex!

Einzelner Zustandsbaum

Vuex verwendet einen einzelnen Zustandsbaum, das heißt, ein Objekt enthält alle Zustandsdaten. Als Konstruktoroption definiert state alle grundlegenden Zustandsparameter, die wir benötigen.

Rufen Sie das Vuex-Attribut in der Vue-Komponente ab

• Wir können den Status von Vuex über Vue's Computed wie folgt abrufen:

const store = new Vuex.Store({
  state: {
    count:0
  }
})
const app = new Vue({
  //..
  store,
  computed: {
    count: function(){
      return this.$store.state.count
    }
  },
  //..
})

Sehen Sie sich unten den Beispielcode des Vuex-Betriebszustandsobjekts an

Immer wenn sich store.state.count ändert, werden die berechneten Attribute neu berechnet und das zugehörige DOM aktualisiert.

Der Kern jeder Vuex-Anwendung ist der Store.

Ich zitiere zwei Sätze aus der offiziellen Dokumentation zur Beschreibung von Vuex:

1. Der Zustandsspeicher von Vuex reagiert. Wenn eine Vue-Komponente den Status aus dem Store liest und sich der Status im Store ändert, wird die entsprechende Komponente entsprechend effizient aktualisiert.

2. Sie können den Status im Shop nicht direkt ändern. Die einzige Möglichkeit, den Status im Speicher zu ändern, besteht darin, explizit eine Mutation zu begehen. Dies ermöglicht es uns, jede Zustandsänderung einfach zu verfolgen und einige Tools zu implementieren, die uns helfen, unsere Anwendung besser zu verstehen.

Verwenden Sie den Status in Vuex

1, führen Sie Store in der Stammkomponente ein, dann kann die Unterkomponente dies über diesen Namen erhalten.$store.state.data Globale Eigenschaften jetzt.

Das Projekt, das ich mit vue-cli erstellt habe, App.vue ist die Stammkomponente

Der Code von App.vue

<template>
 <p id="app">
   <h1>{{$store.state.count}}</h1>  
  <router-view/>
 </p>
</template>
<script>
 import store from '@/vuex/store';
export default {
 name: 'App',
 store
}
</script>
<style>
</style>

Count.vue-Code im Komponentenordner

<template>
 <p>
   <h3>{{this.$store.state.count}}</h3>
 </p>
</template>
<script> 
  export default {
    name:'count'，
  }
</script>
<style scoped>
</style>

Store.js-Code

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
 count: 1
}
export default new Vuex.Store({
 state，
})

2, globale Attribute über die MapState-Hilfsfunktion abrufen

Der Vorteil dieser Methode besteht darin, dass Sie den Attributnamen direkt verwenden können, um das Attribut abzurufen Wert .

Ändern Sie den Code von Component.vue

<template>
 <p>
   <h3>{{this.$store.state.count}}--{{count}}</h3>
  <h4>{{index2}}</h4>
 </p>
</template>
<script> 
  import { mapState,mapMutations,mapGetters } from "vuex";
  export default {
    name:'count',
    data:function(){
      return {
        index:10
      }
    },
    //通过对象展开运算符vuex里的属性可以与组件局部属性混用。
    computed:{...mapState(['count']),
      index2() {
        return this.index+30;
      }  
    } ,
  }
</script>
<style scoped>
</style>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

Was sind die Unterschiede zwischen der Verwendung von length und size() in jQuery?

Kettenstil im JS-Entwurfsmuster Aufruf mit Parse

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vuex-Methode zum Betrieb von Zustandsobjekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!