Heim Web-Frontend js-Tutorial Detaillierte Erläuterung des Vuex-Projektstrukturverzeichnisses und der Konfigurationsverwendung

Detaillierte Erläuterung des Vuex-Projektstrukturverzeichnisses und der Konfigurationsverwendung

May 02, 2018 am 10:16 AM
vuex 目录 配置

Dieses Mal werde ich Ihnen die Verwendung des Vuex-Projektstrukturverzeichnisses und der Konfiguration ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Vuex-Projektstrukturverzeichnisses und der Konfiguration? , lass uns einen Blick darauf werfen.

Zuerst einmal ein ernstzunehmender „Ratschlag“ von der offiziellen Website:

Die Regeln, die Vuex einhalten muss:

1. Der Status auf Anwendungsebene sollte in einem einzigen Store--Objekt zentralisiert werden.

2. Das Einreichen einer Mutation ist die einzige Möglichkeit, den Zustand zu ändern, und dieser Prozess ist synchron.

3. Die gesamte asynchrone Logik sollte in Aktion gekapselt sein.

DateienVerzeichnisstruktur

Die Beziehung zwischen Dateien:

Speicherordner – eine Reihe, in der vuex-Dateien gespeichert werden

store.js – Vuex einführen, Statusdaten festlegen, Getter, Mutation und Aktion einführen

getter.js – Status im Store abrufen

mutation.js – Die Speicherort für Funktionen, die zum Ändern des Status im Store verwendet werden

action.js – Senden Sie Mutationen, um den Status taktvoll zu ändern, und können Sie asynchron arbeiten

Einfache und allgemeine Schreibmethode

store.js-Datei:

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
const state = {
 a: '初始值',
 b: 'balabala...'
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})
Nach dem Login kopieren

In der main.js-Datei (injizieren Sie den Store von der Root-Komponente, genau wie beim Injizieren des Routers):

Durch Registrieren der Store-Option in der Root-Instanz , die Store-Instanz wird in alle Unterkomponenten unter der Stammkomponente eingefügt, und auf Unterkomponenten kann über this.$store zugegriffen werden.

import store from './store/index'
new Vue({
 el: '#app',
 router,
 store,
 ...
})
Nach dem Login kopieren

Einfache Konfiguration von Getter.js (berechnete Eigenschaft des Speichers, Status als Parameter akzeptierend)

export default {
  doneTodos: state = >{
   return state.todos.filter(todo = >todo.done)
  }
}
Nach dem Login kopieren

Get (innerhalb der berechneten Eigenschaft einer Komponente):

computed: {
 doneTodosCount () { 
  return this.$store.getters.doneTodosCount 
 }
}
Nach dem Login kopieren

kann übergeben werden Einfache Konfiguration des Getter-Attributs des Parameters

export default{
 getTodoById: (state) => (id) => { 
  return state.todos.find(todo => todo.id === id) 
 }
}
Nach dem Login kopieren

Get (innerhalb der berechneten Eigenschaft einer Komponente):

computed: {
 getTodoById() { 
  return this.$store.getters.getTodoById(‘参数')
 }
}
Nach dem Login kopieren

mutation.js einfache Konfiguration:

export default {
  increment(state) {
   //变更状态
   state.count++
  }
}
Nach dem Login kopieren

Trigger (in der Komponente)

this.$store.commit(state,payload)
actions.js简单配置:
export default{
 action (context) {
 //异步操作
  setTimeout(()=>{
   //变更状态
   context.commit('mutationFunName',value)
  })
 }
}
Nach dem Login kopieren

Trigger (Komponente)

this.$store.dispatch('mutationFunctionName')
2018-04-07 18:13:34
Nach dem Login kopieren

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 auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Schritte zur Behebung der langsamen ersten Ladegeschwindigkeit von Vue-Router Lazy Loading

vue2. 0-Ressourcendatei Anweisungen zur Verwendung von Assets und Statik

Detaillierte Erläuterung der Verwendung von Router in Angular 5.x

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Vuex-Projektstrukturverzeichnisses und der Konfigurationsverwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Das Funktionsprinzip und die Konfigurationsmethode von GDM im Linux-System Das Funktionsprinzip und die Konfigurationsmethode von GDM im Linux-System Mar 01, 2024 pm 06:36 PM

Titel: Das Funktionsprinzip und die Konfigurationsmethode von GDM in Linux-Systemen. In Linux-Betriebssystemen ist GDM (GNOMEDisplayManager) ein gängiger Anzeigemanager, der zur Steuerung der grafischen Benutzeroberfläche (GUI)-Anmeldung und Benutzersitzungsverwaltung verwendet wird. In diesem Artikel werden das Funktionsprinzip und die Konfigurationsmethode von GDM vorgestellt und spezifische Codebeispiele bereitgestellt. 1. Funktionsprinzip von GDM GDM ist der Display-Manager in der GNOME-Desktop-Umgebung. Er ist für den Start des X-Servers und die Bereitstellung der Anmeldeschnittstelle verantwortlich

Verstehen Sie Linux Bashrc: Funktionen, Konfiguration und Verwendung Verstehen Sie Linux Bashrc: Funktionen, Konfiguration und Verwendung Mar 20, 2024 pm 03:30 PM

Grundlegendes zu Linux Bashrc: Funktion, Konfiguration und Verwendung In Linux-Systemen ist Bashrc (BourneAgainShellruncommands) eine sehr wichtige Konfigurationsdatei, die verschiedene Befehle und Einstellungen enthält, die beim Systemstart automatisch ausgeführt werden. Die Bashrc-Datei befindet sich normalerweise im Home-Verzeichnis des Benutzers und ist eine versteckte Datei. Ihre Funktion besteht darin, die Bashshell-Umgebung für den Benutzer anzupassen. 1. Bashrc-Funktionseinstellungsumgebung

So konfigurieren Sie eine Arbeitsgruppe im Win11-System So konfigurieren Sie eine Arbeitsgruppe im Win11-System Feb 22, 2024 pm 09:50 PM

So konfigurieren Sie eine Arbeitsgruppe in Win11. Eine Arbeitsgruppe ist eine Möglichkeit, mehrere Computer in einem lokalen Netzwerk zu verbinden, wodurch Dateien, Drucker und andere Ressourcen von Computern gemeinsam genutzt werden können. Im Win11-System ist die Konfiguration einer Arbeitsgruppe sehr einfach. Befolgen Sie einfach die folgenden Schritte. Schritt 1: Öffnen Sie die Anwendung „Einstellungen“. Klicken Sie zunächst auf die Schaltfläche „Start“ des Win11-Systems und wählen Sie dann die Anwendung „Einstellungen“ im Popup-Menü aus. Sie können auch die Tastenkombination „Win+I“ verwenden, um „Einstellungen“ zu öffnen. Schritt 2: Wählen Sie „System“. In der App „Einstellungen“ sehen Sie mehrere Optionen. Klicken Sie bitte auf die Option „System“, um die Seite mit den Systemeinstellungen aufzurufen. Schritt 3: Wählen Sie „Info“. Auf der Einstellungsseite „System“ sehen Sie mehrere Unteroptionen. bitte klicken

So konfigurieren und installieren Sie FTPS im Linux-System So konfigurieren und installieren Sie FTPS im Linux-System Mar 20, 2024 pm 02:03 PM

Titel: So konfigurieren und installieren Sie FTPS im Linux-System. Im Linux-System ist FTPS ein sicheres Dateiübertragungsprotokoll. Im Vergleich zu FTP verschlüsselt FTPS die übertragenen Daten über das TLS/SSL-Protokoll, was die Datensicherheit verbessert Übertragung. In diesem Artikel stellen wir die Konfiguration und Installation von FTPS in einem Linux-System vor und stellen spezifische Codebeispiele bereit. Schritt 1: vsftpd installieren Öffnen Sie das Terminal und geben Sie den folgenden Befehl ein, um vsftpd zu installieren: sudo

Interpretation und Best Practices der MyBatis Generator-Konfigurationsparameter Interpretation und Best Practices der MyBatis Generator-Konfigurationsparameter Feb 23, 2024 am 09:51 AM

MyBatisGenerator ist ein offiziell von MyBatis bereitgestelltes Codegenerierungstool, mit dem Entwickler schnell JavaBeans, Mapper-Schnittstellen und XML-Zuordnungsdateien generieren können, die der Datenbanktabellenstruktur entsprechen. Bei der Verwendung von MyBatisGenerator zur Codegenerierung ist die Einstellung der Konfigurationsparameter von entscheidender Bedeutung. Dieser Artikel beginnt aus der Perspektive der Konfigurationsparameter und untersucht eingehend die Funktionen von MyBatisGenerator.

Wie installiere und konfiguriere ich DRBD auf dem CentOS7-System? Tutorial zur Implementierung von Hochverfügbarkeit und Datenredundanz! Wie installiere und konfiguriere ich DRBD auf dem CentOS7-System? Tutorial zur Implementierung von Hochverfügbarkeit und Datenredundanz! Feb 22, 2024 pm 02:13 PM

DRBD (DistributedReplicatedBlockDevice) ist eine Open-Source-Lösung zur Erzielung von Datenredundanz und hoher Verfügbarkeit. Hier ist das Tutorial zum Installieren und Konfigurieren von DRBD auf dem CentOS7-System: DRBD installieren: Öffnen Sie ein Terminal und melden Sie sich als Administrator beim CentOS7-System an. Führen Sie den folgenden Befehl aus, um das DRBD-Paket zu installieren: sudoyuminstalldrbd DRBD konfigurieren: Bearbeiten Sie die DRBD-Konfigurationsdatei (normalerweise im Verzeichnis /etc/drbd.d), um die Einstellungen für DRBD-Ressourcen zu konfigurieren. Sie können beispielsweise die IP-Adressen, Ports und Geräte des Primärknotens und des Backup-Knotens definieren. Stellen Sie sicher, dass eine Netzwerkverbindung zwischen dem Primärknoten und dem Backup-Knoten besteht.

So erstellen Sie automatisch ein Verzeichnis. So legen Sie das Format des automatisch generierten Verzeichnisses fest. So erstellen Sie automatisch ein Verzeichnis. So legen Sie das Format des automatisch generierten Verzeichnisses fest. Feb 22, 2024 pm 03:30 PM

Wählen Sie den Stil des Katalogs in Word aus. Dieser wird nach Abschluss des Vorgangs automatisch generiert. Analyse 1. Gehen Sie auf Ihrem Computer zu Word und klicken Sie auf „Importieren“. 2Klicken Sie nach der Eingabe auf das Dateiverzeichnis. 3 Wählen Sie dann den Stil des Verzeichnisses aus. 4. Nach Abschluss des Vorgangs können Sie sehen, dass das Dateiverzeichnis automatisch generiert wird. Ergänzung: Das Inhaltsverzeichnis des Zusammenfassungs-/Notizartikels wird automatisch generiert, einschließlich Überschriften der ersten Ebene, Überschriften der zweiten Ebene und Überschriften der dritten Ebene, normalerweise nicht mehr als Überschriften der dritten Ebene.

So lesen Sie den Katalog beim Lesen auf WeChat. So zeigen Sie den Katalog an So lesen Sie den Katalog beim Lesen auf WeChat. So zeigen Sie den Katalog an Mar 30, 2024 pm 05:56 PM

Die mobile Version der WeChat-Lese-App ist eine sehr gute Lesesoftware. Sie können sie jederzeit und überall mit nur einem Klick lesen und online lesen Sortieren Sie Ihre Bücher ordentlich und genießen Sie eine angenehme und entspannte Leseatmosphäre. Wechseln Sie den Lesemodus verschiedener Szenarien, aktualisieren Sie jeden Tag kontinuierlich die neuesten Buchkapitel, unterstützen Sie die Online-Anmeldung von mehreren Geräten und laden Sie sie stapelweise in das Bücherregal herunter. Sie können es mit oder ohne Internet lesen, sodass jeder mehr Wissen daraus entdecken kann Jetzt erläutert der Herausgeber online die Methode zum Anzeigen des Katalogs für WeChat-Lesepartner. 1. Öffnen Sie das Buch, dessen Katalog Sie ansehen möchten, und klicken Sie in die Mitte des Buchs. 2. Klicken Sie auf das Symbol mit den drei Linien in der unteren linken Ecke. 3. Sehen Sie sich im Popup-Fenster den Buchkatalog an

See all articles