Ausführliche Erklärung zur Implementierung von Vuex (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die Implementierung eines einfachen Vuex vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Zuerst müssen wir wissen, warum wir Vuex verwenden. Die Kommunikation zwischen übergeordneten und untergeordneten Komponenten kann über Requisiten und benutzerdefinierte Ereignisse erfolgen, und die einfache Kommunikation zwischen nicht über- und untergeordneten Komponenten erfolgt über den Bus (eine leere Vue-Instanz). Verwenden Sie dann Vuex, um die komplexe Kommunikation von Nicht-Eltern-Kind-Komponenten zu lösen.

Es spielt keine Rolle, ob Sie nur wissen, wie man Vuex verwendet. Jeder kann die Dokumentation lesen und den Code eingeben. Möchten Sie nicht wissen, wie Vuex implementiert wird? !

Lassen wir den Quellcode von vuex beiseite und überlegen wir uns zunächst, wie man ein einfaches „vuex“ implementiert. Wie einfach ist das? Ich möchte keine Getter, Mutationen, Aktionen usw., ich möchte nur den Status.

Nicht-Eltern-Kind-Komponentenkommunikation

Vor der Implementierung müssen wir die Implementierung von Bus überprüfen, indem wir uns das Beispiel von der offiziellen Website leihen:

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

Wenn ich an diese Tage zurückdenke, wusste ich nicht, wo ich den instanziierten Bus platzieren sollte, also hatte ich keine andere Wahl, als ihn unter Windows zu platzieren und weiterhin window.bus zu verwenden. Obwohl dies in Ordnung ist, wirkt es sich dennoch auf den globalen Geltungsbereich aus.

Eines Tages stellte ich plötzlich fest, dass ich es unter der Root-Instanz von Vue mounten konnte (verabschieden Sie sich von nun an von window.bus), also kam ich auf:

var app = new Vue({
 el: '#app',
 bus: bus
})

// 使用 bus
app.$options.bus

// or
this.$root.$options.bus

Dann habe ich entdeckte, dass der Bus tatsächlich nicht nur über Ereignisse kommunizieren kann. Tatsächlich ist Bus eine Vue-Instanz, auf die Daten reagieren. Beispielsweise gibt es unter der Root-Instanz der App zwei nicht übergeordnete und untergeordnete Komponenten, die beide Busdaten verwenden und daher synchron reagieren.

var bus = new Vue({
 data: {
  count: 0
 }
})

Oben ändert Unterkomponente a die Anzahl. Wenn Unterkomponente b die Anzahl verwendet, kann sie auf den neuesten Zählwert reagieren.

Haben Sie es nach so viel Reden noch nicht entdeckt? Geht es dabei nicht nur darum, die Kommunikation zwischen Nichtkomponenten zu realisieren, den Zustand von Vuex? !

Bus kapseln

Ja, kapseln Sie den Bus gerade. Dies ist das einfachste „Vuex“ (nur mit der Funktion „Zustand“). Zuerst haben wir eine Root-Instanz-App mit zwei Nicht-Eltern-Kind-Komponenten childA und childB .

Die Implementierung des HTML-Codes ist wie folgt:

<p id="app">
 <child-a></child-a>
 <child-b></child-b>
</p>

Implementierung der Nicht-Eltern-Kind-Komponente

Dann gibt es zwei Nicht-Eltern- Untergeordnete Komponenten und die Implementierung von App und untergeordneter Komponente verwenden beide die Anzahl des Busses, der hier durch store.state dargestellt wird, was mit vuex übereinstimmt:

// 待实现
const store = new Store(Vue, {
 state: {
  count: 0
 }
})

// 子组件 a
const childA = {
 template: &#39;<button @click="handleClick">click me</button>&#39;,
 methods: {
  handleClick () {
   this.$store.state.count += 1
  }
 }
}

// 子组件 b
const childB = {
 template: &#39;<p>count: {{ count }}</p>&#39;,
 computed: {
  count () {
   return this.$store.state.count
  }
 }
}

new Vue({
 el: &#39;#app&#39;,
 components: {
  &#39;child-a&#39;: childA,
  &#39;child-b&#39;: childB
 },
 store: store
})

Stellen Sie sicher, dass es einen Store gibt, in dem implementiert werden kann der Code. Die erforderlichen Parameter, da ich zu faul bin, Vue.use () hier zu verwenden, übergebe ich Vue direkt als Parameter zur Verwendung, und dann stimmt der zweite Parameter mit dem Parameter überein, den wir mit vuex übergeben haben.

Implementierung von Store

Der nächste Schritt ist die Implementierung von Store, eine zweistufige Implementierung:

1. Erstellen Sie eine bus-Instanz;

2. Alle untergeordneten Komponenten auf this.$store zugreifen lassen.

Der erste Schritt wurde bereits oben erwähnt. Der zweite Schritt verwendet hauptsächlich Vue.mixin für die globale Mischung, findet jedoch lediglich die Root-Instanz mit dem Store und weist den Store dem Vue-Prototyp zu . Es ermöglicht auch das Einmischen der Root-Instanz-App, ohne dass speziell Mixins geschrieben werden müssen. Der von

class Store {
 constructor (Vue, options) {
  var bus = new Vue({
   data: {
    state: options.state
   }
  })

  this.install(Vue, bus)
 }
 
 install (Vue, bus) {
  Vue.mixin({
   beforeCreate () {
    if (this.$options.store) {
     Vue.prototype.$store = bus
    }
   }
  })
 }
}

implementierte Store ist ein einfacher „vuex“ mit dem Status „vuex“, der ausreicht, um eine einfache Kommunikation zwischen nicht übergeordneten und untergeordneten Komponenten zu ermöglichen.

Erstellen Sie eine Businstanz im Konstruktor von Store und fügen Sie sie in den Prototyp von Vue ein, damit alle Komponenten auf diesen.$store zugreifen können, der die Businstanz ist. this.$store ist eine Vue-Instanz. Durch den Zugriff auf this.$store.state.count wird also tatsächlich auf Daten zugegriffen, wodurch eine Antwortsynchronisierung zwischen nicht übergeordneten und untergeordneten Komponenten erreicht wird. Der gesamte Quellcode ist hier verfügbar.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Was sind die Sicherheitslücken bei der Verwendung von Timing-Angriffen in Knotenanwendungen?

Einseitige Implementierung in Vue-Komponentenlieferungsobjektbindung, wie geht das?

So verwenden Sie TypeScript in Vue-Komponenten (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung von Vuex (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!