Detaillierte Erklärung der Vuex-Umgebung

Detaillierte Erklärung der Vuex-Umgebung

Erstellen Sie eine Vuex-Umgebung

Erstellen Sie einen Ordner store im src -Verzeichnis und erstellen Sie eine index.js Datei im store -Ordner

index.js wird zum Erstellen des Core Stores in Vuex verwendet.

// scr/vuex/index.js
 // Vuex importieren
Vuex von „vuex“ importieren
 // Wird verwendet, um auf Aktionen in Komponenten zu reagieren const actions = {}
// Wird zum Manipulieren von Daten verwendet const mutations = {}
// Wird zum Speichern von Daten verwendet const state = {}
 // Einen Shop erstellen
const store = neuer Vuex.Store({
    Aktionen,
    Mutationen,
    Zustand
})
 // Shop exportieren
Standardspeicher exportieren
// Haupt.js
Vue von „vue“ importieren
App aus „./App.vue“ importieren
Vuex von „vuex“ importieren
Store aus „./store/index“ importieren
 Vue.Verwenden(Vuex)
 neuer Vue({
    render:h => h(App),
    speichern
}).$mount('#app')

Dies führt jedoch zu einem Fehler:

[vuex] muss Vue.use(Vuex) aufrufen, bevor eine Store-Instanz erstellt wird

Bedeutung : [vuex] Vue.use(Vuex) muss aufgerufen werden, bevor eine Store-Instanz erstellt wird

Grund : Wenn wir den Store importieren, wird zuerst der Code der importierten Datei ausgeführt. Wenn also der folgende Code ausgeführt wird, wurde die importierte Datei ausgeführt.

In diesem Fall vertauschen wir die beiden Codezeilen: import store from './store/index' und Vue.use(Vuex)

Aber das tatsächliche Ergebnis ist: [vuex] must call Vue.use(Vuex) before creating a store instance , immer noch Fehler

Grund : Dies ist ein Problem mit der Gerüstanalyse der Importanweisungen. Die importierte Datei wird am Anfang des Codes platziert und dann wird der Code dieser Datei analysiert.

Richtige Schreibweise:

// scr/store/index.js
 // Vuex und Vue importieren
Vuex von „vuex“ importieren
Vue von „vue“ importieren
 // Vuex-Plugin anwenden Vue.use(Vuex)
 // Wird verwendet, um auf Aktionen in Komponenten zu reagieren const actions = {}
// Wird zum Manipulieren von Daten verwendet const mutations = {}
// Wird zum Speichern von Daten verwendet const state = {}
 // Einen Shop erstellen
const store = neuer Vuex.Store({
    Aktionen,
    Mutationen,
    Zustand
})
 // Shop exportieren
Standardspeicher exportieren
// Haupt.js
Vue von „vue“ importieren
App aus „./App.vue“ importieren
Store aus „./store/index“ importieren
 neuer Vue({
    render:h => h(App),
    speichern
}).$mount('#app')

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Vue Vuex erstellt eine Vuex-Umgebung und teilt Vuex Sum Case
  • Vue-Anfängerhandbuch: Umgebungserstellung und Erste Schritte
  • Detaillierte Zusammenfassung der Konstruktion der Vue-Projektumgebung
  • Erstellen Sie eine Vue-Entwicklungsumgebung
  • Einfaches Tutorial zum Einrichten einer Vue-Umgebung
  • Vue2.0 von Grund auf_Schritte zum Erstellen einer Umgebung
  • Detaillierte Erklärung der einfachsten Strategie zum Einrichten einer vue.js-Entwicklungsumgebung
  • Schritt-für-Schritt-Anleitung zum Erstellen und Installieren einer Windows-basierten Vue.js-Laufzeitumgebung
  • Tutorial zum Einrichten der vue.js-Entwicklungsumgebung
  • Erstellen einer Vue-Projektumgebung

<<:  Parsen des Linux-Quellcodes epoll

>>:  Detaillierte Erklärung zur Verwendung des Basis-Tags in HTML

Artikel empfehlen

js, um den Effekt eines Lichtschalters zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Anfänger lernen einige HTML-Tags (3)

Verwandte Artikel: Anfänger lernen einige HTML-Ta...

So bereinigen Sie regelmäßig Bilder, die über Jenkins „None“ sind

Vorwort Wenn beim kontinuierlichen Code-Delivery-...

Grundkenntnisse der MySQL-Datenbank

Inhaltsverzeichnis 1. Datenbanken verstehen 1.1 D...

Vue-Electron-Problemlösung bei Verwendung des seriellen Ports

Der Fehler lautet wie folgt: Nicht abgefangener T...

HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts

Inhaltsverzeichnis erreichen: Zusammenfassen: Daz...

Detaillierte Erläuterung des Apache SkyWalking-Alarmkonfigurationshandbuchs

Apache SkyWalking Apache SkyWalking ist ein Tool ...

So erstellen Sie eine Tabelle in MySQL und fügen Feldkommentare hinzu

Code und Beispiele direkt posten #Schreiben Sie K...

MySql 8.0.11-Winxp64 (kostenlose Installationsversion) Konfigurations-Tutorial

1. Entpacken Sie das Zip-Paket in das Installatio...