So verwenden Sie Vuex zum Bedienen von Statusobjekten

Dieses Mal zeige ich Ihnen, wie Sie Vuex zum Betreiben von Zustandsobjekten verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vuex zum Betreiben von Zustandsobjekten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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 Module.

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.
Module => Modulares Vuex

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 Vuex-Status ü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
    }
  },
  //..
})

Werfen wir einen Blick auf die vuex operation state object Der Beispielcode

Immer wenn sich store.state.count ändert, werden die berechneten Eigenschaften erneut abgerufen 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 global über this.$store.state.data abrufen Namensattribut.

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:

Wie man Vue-Dateien analysiert

Wie man Vue optimiert

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vuex zum Bedienen von Statusobjekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!