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

CSS3-Beispielcode zum Erreichen einer Elementbogenbewegung

So verwenden Sie CSS, um die Bogenbewegung von El...

So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein

1. Geschäftshintergrund Die Verwendung einer Mask...

Detaillierte Erklärung des JQuery-Selektors

Inhaltsverzeichnis Grundlegende Selektoren: Ebene...

Lassen Sie uns über das v-on-Parameterproblem in Vue sprechen

Verwendung von v-on:clock in Vue Ich lerne derzei...

So aktualisieren Sie CentOS7 auf CentOS8 (detaillierte Schritte)

Dieser Artikel erläutert anhand eines konkreten B...

Nginx verwendet Lua+Redis, um IP dynamisch zu blockieren

1. Hintergrund Bei unserer täglichen Website-Wart...

onfocus="this.blur()" wird von blinden Webmastern gehasst

Als er über die Seite zur Bedienung der Bildschir...

MySQL-Parameterbezogene Konzepte und Abfrageänderungsmethoden

Vorwort: In einigen früheren Artikeln haben wir h...

Fassen Sie einige häufige Rankingprobleme in MySQL zusammen

Vorwort: In manchen Anwendungsszenarien stoßen wi...