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

Geplantes Teilen von Skripten für MySQL-Datenbanksicherungen

BackUpMysql.sh-Skript #!/bin/bash PATH=/bin:/sbin...

So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue

1. Dynamische Parameter Ab 2.6.0 können Sie einen...

Vue implementiert Bildverifizierungscode beim Anmelden

In diesem Artikelbeispiel wird der spezifische Co...

MySQL-Benutzer und -Berechtigungen und Beispiele zum Knacken des Root-Passworts

MySQL-Benutzer und -Berechtigungen In MySQL gibt ...

JS implementiert die Benutzerregistrierungsschnittstellenfunktion

In diesem Artikelbeispiel wird der spezifische JS...

React realisiert sekundären Verknüpfungseffekt (Treppeneffekt)

In diesem Artikel wird der spezifische Code von R...

MySQL 5.7.10 Installations- und Konfigurations-Tutorial unter Windows

MySQL bietet zwei verschiedene Versionen für unte...

Sollte ich beim Erstellen einer Website die Kodierung UTF-8 oder GB2312 verwenden?

Beim Öffnen ausländischer Websites werden häufig ...

FastDFS- und Nginx-Integration zur Codeanalyse

FastDFS- und Nginx-Integration: Der Tracker wird ...

Umfassende Erklärung zum CocosCreator Hot Update

Inhaltsverzeichnis Vorwort Was ist Hot Change Coc...