Eine Einführung in vuex

Ermöglichen Sie jedem den schnellen Einstieg in VUEX in drei einfachen Schritten. In diesem Artikel werden auch die grundlegendsten Funktionen von VUEX und verwandte Wissenspunkte vorgestellt.

Vorwort

In früheren Projekten sind wir mehr oder weniger auf einige Stellen gestoßen, an denen eine Kommunikation zwischen Komponenten erforderlich ist, und zwar aus verschiedenen Gründen.
Die Kosten für den Eventbus sind höher als bei Vuex, daher wurde Vuex für die technische Auswahl ausgewählt, aber ich weiß nicht warum.
Einige Neulinge im Team begannen zurückzuschrecken, als sie von Vuex hörten, denn Vuex ist es schwierig? Ist es wirklich schwierig?
Heute beweisen wir mit 3 einfachen Schritten, wie einfach Vuex ist.

Dies ist eine rein persönliche Erfahrung, und wenn es Fehler gibt, sind sie willkommen !

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

Schritt 0

Erstellen Ein neues Vue-Projekt und die Installation von Vuex. Ich werde hier nicht zu viel vorstellen. Wenn Sie hineinklicken können, verfügen Sie standardmäßig über diese Fähigkeiten >

Erstellen Sie eine neue .js-Datei mit einem beliebigen Namen und Speicherort. Wie üblich wird empfohlen, dass sie 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 etwas vertrauter aus, aber kommt er Ihnen nicht besonders bekannt vor? anders als gewöhnliches Vue.

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

Der zweite Schritt

Fügen Sie die oben genannten Dateien in die Eingabedatei ein und ändern Sie die an new Vue() übergebenen Parameter leicht. Nach der neuen Zeile gibt es Hinweise Dateispeicherort/src/main .js (von vue-cli automatisch generierter Eintrag, wenn Sie es ohne Gerüst machen können, dann brauche ich es nicht zu erklären)

import Vue from 'vue'
import App from './App'
import vuexStore from './store' // 新增

new Vue({
 el: '#app',
 store:vuexStore     // 新增
 components: { App },
 template: &#39;<App/>&#39;
})

Tipp: Store aus „./store“ importieren. Die Adresse dahinter ist die, die wir oben erstellt haben. Der Speicherort der Datei (/src/store/index.js).

Da es sich um index.js handelt, kann es weggelassen werden.

Der dritte Schritt

Die oben genannten 2 Schritte haben tatsächlich die Grundkonfiguration von vuex abgeschlossen. Der nächste Schritt ist die Verwendung von
Dateispeicherort/src/main.js (auch app.vue generiert von vue-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 &#39;./components/HelloWorld&#39;

export default {
 computed:{
 getName(){
  return this.$store.state.name
 }
 },
 methods:{
 changeName () {
  this.$store.commit(&#39;updateName&#39;)
 }
 }
}
</script>

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

Und wenn wir die Daten ändern möchten, müssen wir dies nicht tun Verwenden Sie this.xxx = xxx, aber ändern Sie es in this.$store.commit('updateName')

Zusammenfassung

Sie denken vielleicht, was ist das? Bedeutung des obigen Beispiels? Warum nicht einfach die Daten und Methoden von Vue verwenden?Das obige Beispiel dient nur dazu, kurz zu erklären, wie man Vuex verwendet, sodass einige Prozesse vereinfacht werden. Stellen Sie sich vor, Sie hätten eine Seite wie diese:

Insgesamt gibt es 10 Schichten verschachtelter Komponenten (das heißt, es gibt Unter-Unterkomponenten innerhalb von Unterkomponenten. Es gibt auch Unter-Unter-Unterkomponenten unter den Unterkomponenten. und so weiter für 10 Ebenen)

Wenn sich dann die Daten der letzten Schichtkomponente ändern und wir die erste Schichtkomponente benachrichtigen möchten, müssen wir nur Folgendes tun: Verwenden Sie in der Komponente this.$store .commit(),

, und verwenden Sie dann das berechnete Attribut für die äußerste Komponente, um den entsprechenden Wert zu erhalten, sodass dieser in Echtzeit aktualisiert werden kann. Es ist nicht erforderlich, $emit zu durchlaufen Schichten.

Endlich

Ich wollte ursprünglich am Ende auf Getter, Aktion+Versand, Modularität usw. eingehen, aber um es wert zu sein des Titels. Konsolidierung der fortgeschrittenen VUEX-Wissenspunkte

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie im PHP-Chinesisch Webseite!

Verwandte Empfehlungen:

Einführung in die Verwendung von v-bind in VUE

So vereinheitlichen Sie den Vue-Codierungsstil in vscode Einführung

Das obige ist der detaillierte Inhalt vonEine Einführung in vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!