Ausführliche Erläuterung der Schritte für den Einstieg in vuex

Dieses Mal erkläre ich Ihnen ausführlich die Schritte für den Einstieg in vuex. Was sind die Vorsichtsmaßnahmen für den Einstieg in vuex?

Vorwort

In den vorherigen Projekten sind wir mehr oder weniger auf einige Stellen gestoßen, an denen eine Kommunikation zwischen Komponenten erforderlich ist, allerdings aus verschiedenen Gründen,
Die Kosten für den Eventbus sind höher als die für Vuex, daher habe ich mich für die technische Auswahl für Vuex entschieden, aber ich weiß nicht warum.
Einige Neulinge im Team begannen zurückzuschrecken, als sie von Vuex hörten, weil Vuex schwierig ist ? Wirklich? Ist es schwierig?
Heute beweisen wir mit 3 einfachen Schritten, wie einfach Vuex ist.

Dies ist eine rein persönliche Erfahrung, und es kann zwangsläufig zu Ungenauigkeiten kommen , bitte korrigieren Sie mich. !

Dies ist ein Einsteiger-Tutorial, Einsteiger-Tutorial, Einsteiger-Tutorial für Anfänger

Schritt 0

Erstellen Sie ein neues Vue-Projekt und installieren Sie vuex. Wenn Sie darauf klicken können, verfügen Sie standardmäßig über diese Fähigkeiten.

Der erste Schritt

Erstellen Sie eine neue .js-Datei. Der Speicherort des Namens ist beliebig. Wie üblich wird empfohlen, dass er sich im Verzeichnis /src/store befindet (falls Sie keines haben, erstellen Sie selbst eine).

Dateispeicherort/src/store/index.js

// 引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 这里需要use一下,固定写法,记住即可
Vue.use(Vuex)
// 直接导出 一个 Store 的实例
export default new Vuex.Store({
 // 类似 vue 的 data
 state: {
 name: 'oldName'
 },
 // 类似 vue 里的 mothods(同步方法)
 mutations: {
 updateName (state) {
  state.name = 'newName'
 }
 }
})

Der Code sieht ein bisschen mehr aus, aber sieht er nicht viel anders aus als gewöhnliches Vue?

Dieser Schritt dient eigentlich dazu, einen neuen Shop zu erstellen, aber wir haben ihn im Projekt noch nicht verwendet.

Der zweite Schritt

Stellen Sie das oben Gesagte vor Datei in der Eintragsdatei und ändern Sie die an new Vue() übergebenen Parameter leicht. Nach den neuen Zeilen werden Hinweise angezeigt:

Dateispeicherort/src/main.js (der Eintrag automatisch). generiert von vue-cli, wenn Sie auf Gerüste verzichten können, muss ich es nicht erklären.)

import Vue from 'vue'
import App from './App'
import vuexStore from './store' // 新增
new Vue({
 el: '#app',
 store:vuexStore     // 新增
 components: { App },
 template: '<App/>'
})

Tipp: Die Adresse nach dem Importieren des Geschäfts aus „./store“ ist der Standort von die Datei, die wir oben erstellt haben (/src/store/index.js)
Da es sich um index.js handelt, kann ich sie weglassen

Der dritte Schritt

Die oben genannten 2 Schritte haben tatsächlich die Grundkonfiguration von vuex abgeschlossen. Der nächste Schritt besteht darin, die

Datei location/src/main .js zu verwenden (es ist auch app.vue, die von vue generiert wird). cli. Zur Vereinfachung der Demonstration habe ich den redundanten Code entfernt)

<template>
 <p>
 {{getName}}
 <button @click="changeName" value="更名">更名</button>
 </p>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit('updateName')
 }
 }
}
</script>

Dies ist eine sehr gewöhnliche Vue-Datei. Der Unterschied besteht darin, dass wir hier das berechnete Attribut verwenden, um die „Daten“ im Speicher abzurufen

Wenn wir die Daten ändern möchten, verwenden wir nicht mehr this.xxx = xxx und ändern es in this.$store.commit('updateName')

Zusammenfassung

Sie denken vielleicht, welche Bedeutung das obige Beispiel hat? Warum nicht einfach die Daten und Methoden von Vue verwenden?

Das obige Beispiel dient nur der Einfachheit. Erklären Sie, wie man Vuex verwendet. Daher werden einige Prozesse vereinfacht. Stellen Sie sich vor, Sie hätten eine Seite wie diese:

hat insgesamt 10 Ebenen verschachtelter Komponenten (das heißt, es gibt Unterkomponenten innerhalb von Unterkomponenten und es gibt Unterkomponenten). -Unterkomponenten darunter. Es gibt Unter-Unter-Unterkomponenten usw. für 10 Ebenen)

Wenn sich dann die Daten der letzten Ebenenkomponente ändern, möchten wir die erste Ebenenkomponente benachrichtigen , wir müssen this.$store nur in der Komponente der untersten Ebene verwenden commit(),

Dann verwenden Sie das berechnete Attribut für die äußerste Komponente, um den entsprechenden Wert zu erhalten, und er kann in Echtzeit aktualisiert werden. Es besteht keine Notwendigkeit, Schicht für Schicht nach oben zu gehen.

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln php Chinesische Website!

Empfohlene Lektüre:

Wie man das V-Modell verwendet und verspricht, die Vue-Popup-Komponente zu implementieren

Wie um das Vue Secondary Encapsulation Axios Plug-in zu verwenden

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte für den Einstieg in vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!