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

Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld

Voraussetzungen Compose ist ein Tool zum Orchestr...

Tipps zum Erstellen von Web-Tabellenrahmen

<br />Tipps zum Erstellen von Web-Tabellenra...

So löschen Sie ein Image in Docker

Der Befehl zum Löschen von Bildern im Docker laut...

Detaillierte Erklärung verschiedener Join-Zusammenfassungen von SQL

SQL Left Join, Right Join, Inner Join und Natural...

CSS Paint API: Ein CSS-ähnliches Zeichenbrett

1. Canvas-Bilder als CSS-Hintergrundbilder verwen...

Detaillierte Erläuterung der Mybatis-Sonderzeichenverarbeitung

Vorwort: Mybatis-Sonderzeichenverarbeitung, Verar...

Detailliertes Beispiel zum Erstellen und Löschen von Tabellen in MySQL

Der Befehl zur Tabellenerstellung erfordert: Der...

Detaillierte Verwendung des JS-Arrays für jede Instanz

1. forEach() ist ähnlich wie map(). Es wendet ebe...

Grafisches Tutorial zur Installation von MySQL 5.5 unter Win7

Die MySQL-Installation ist relativ einfach. Norma...

Apache Spark 2.0-Jobs brauchen lange, bis sie abgeschlossen sind

Phänomen Bei der Verwendung von Apache Spark 2.x ...

So implementieren Sie eine geplante Sicherung einer MySQL-Datenbank

1. Erstellen Sie ein Shell-Skript vim backupdb.sh...

Implementierung der TCPWrappers-Zugriffskontrolle in Centos

1. Übersicht über TCP-Wrapper TCP Wrapper „verpac...