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)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen 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

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.

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

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.

Anleitung zum Einrichten eines lokalen Maven-Repositorys, um die Projekterstellung zu beschleunigen Anleitung zum Einrichten eines lokalen Maven-Repositorys, um die Projekterstellung zu beschleunigen Feb 24, 2024 pm 02:12 PM

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie das lokale Maven-Lager konfigurieren: Verbessern Sie die Geschwindigkeit der Projekterstellung. Maven ist ein leistungsstarkes Projektmanagement-Tool, das in der Java-Entwicklung häufig verwendet wird. Es kann uns helfen, Projektabhängigkeiten zu verwalten, Projekte zu erstellen, Projekte zu veröffentlichen usw. Während des eigentlichen Entwicklungsprozesses stoßen wir jedoch manchmal auf das Problem einer langsamen Projektkonstruktionsgeschwindigkeit. Eine Lösung besteht darin, ein lokales Repository zu konfigurieren, um die Geschwindigkeit der Projekterstellung zu verbessern. In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie das lokale Maven-Lager konfigurieren, um die Konstruktion Ihres Projekts effizienter zu gestalten. Warum müssen Sie ein lokales Lager konfigurieren?

Wo kann ich die Konfiguration meines Win11-Computers überprüfen? So finden Sie die Konfigurationsinformationen eines Win11-Computers Wo kann ich die Konfiguration meines Win11-Computers überprüfen? So finden Sie die Konfigurationsinformationen eines Win11-Computers Mar 06, 2024 am 10:10 AM

Wenn wir das Win11-System verwenden, müssen wir manchmal die Konfiguration unseres Computers überprüfen, aber viele Benutzer fragen auch, wo sie die Konfiguration des Win11-Computers überprüfen können. Tatsächlich ist die Methode sehr einfach. Benutzer können die Systeminformationen direkt unter Einstellungen öffnen und dann die Computerkonfigurationsinformationen anzeigen. Lassen Sie diese Website den Benutzern sorgfältig vorstellen, wie sie Informationen zur Win11-Computerkonfiguration finden. So finden Sie Informationen zur Win11-Computerkonfiguration. Methode 1: 1. Klicken Sie auf Start und öffnen Sie Computereinstellungen. 3. Auf dieser Seite können Sie Informationen zur Computerkonfiguration anzeigen. 2. Geben Sie im Eingabeaufforderungsfenster systeminfo ein und drücken Sie die Eingabetaste, um die Computerkonfiguration anzuzeigen.

See all articles