Erstelle eine Anmeldefunktionalität mit Vue.js | Vuex-Tutorial

Einführung

In diesem Projekt lernst du, wie du eine Anmeldefunktionalität mit Vue.js und Vuex aufbaust. Ziel des Projekts ist es, dir das Zusammenspiel von Vue.js-Komponenten mit einem auf Vuex basierenden Zustandsmanagementsystem zu vermitteln.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projektstruktur und die Funktion jeder Datei verstehst
Wie du das Problem in der Anmeldefunktion identifizierst
Wie du die Anmeldefunktion behebst, indem du den Vuex-Speicher und die Vue-Komponente modifizierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Zu verstehen, wie man ein Vue.js-Projekt mit Vuex strukturiert
Vuex anzuwenden, um den Anwendungszustand zu verwalten
Probleme in einer Vue.js-Anwendung zu diagnostizieren und zu beheben
Vuex mit Vue.js-Komponenten zu integrieren

Verstehe die Projektstruktur

In diesem Schritt wirst du die Projektstruktur und die Dateien kennenlernen, die an der Anmeldefunktionalität beteiligt sind.

Die Projektverzeichnisstruktur sieht wie folgt aus:

├── components
│   ├── login.js
│   └── panel.js
├── css
│   └── style.css
├── index.html
├── lib
│   ├── vue.min.js
│   └── vuex.min.js
└── store
    ├── BaseModule.js
    ├── UserModule.js
    └── index.js

Die wichtigsten Dateien und ihre Funktionen sind:

index.html: Dies ist die Haupt-HTML-Datei, die als Einstiegspunkt der Anwendung dient.
components/login.js: In dieser Datei befindet sich die Vue-Komponente für die Anmeldeseite.
components/panel.js: In dieser Datei befindet sich die Vue-Komponente für das Willkommenspanel.
store/BaseModule.js: In dieser Datei wird das Basis-Vuex-Modul definiert.
store/UserModule.js: In dieser Datei werden das Vuex-Modul für benutzerbezogene Daten und Aktionen definiert.
store/index.js: In dieser Datei werden die Vuex-Module kombiniert und der Vuex-Speicher erstellt.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben im VM und aktualisiere es manuell, um die Seite zu sehen. Die Startseite sieht wie folgt aus:

Identifiziere das Problem

Das Problem besteht darin, dass die Anmeldefunktion nicht wie erwartet funktioniert. Nachdem der Benutzername eingegeben wurde und auf die Schaltfläche "Bestätigen" geklickt wurde, ändern sich die Daten, aber die Anmeldeseite wird weiterhin angezeigt und die Willkommensseite wird nicht richtig dargestellt.

Um das Problem zu identifizieren, musst du den zugehörigen Code im Ordner store sorgfältig lesen, insbesondere die Datei UserModule.js, und es mit deinen Kenntnissen über Vuex kombinieren.

Behebe die Anmeldefunktion

Öffne die Datei index.html und finde den Abschnitt TODO im <script>-Tag.

Ändere in der computed-Sektion die folgenden Attribute wie folgt:

computed: {
  welcome() {
    return store.getters.welcome;
  },
  username() {
    return store.getters["user/username"];
  },
  token() {
    return store.getters["user/token"];
  }
},

Diese berechneten Eigenschaften ermöglichen es dir, auf die erforderlichen Daten im Vuex-Speicher zuzugreifen.

Aktualisiere in der methods-Sektion die login-Methode wie folgt:
```
methods: {
  login(username) {
    if (username) {
      store.commit("user/login", {
        username,
        token: "sxgWKnLADfS8hUxbiMWyb"
      });
      store.commit("say", "Logged in successfully, welcome back!");
    }
  }
}
```
Diese aktualisierte login-Methode wird die erforderlichen Aktionen an den Vuex-Speicher übermitteln, um den Anmeldestatus des Benutzers zu aktualisieren und die Willkommensnachricht anzuzeigen.

Teste die Anmeldefunktionalität

Speichere die Änderungen in der Datei index.html.
Aktualisiere die Webbrowserseite.
Gib den Benutzernamen "admin" ein und klicke auf die Schaltfläche "Bestätigen".
Du solltest jetzt das Willkommenspanel sehen, wie es in dem Bild "Fertiger Effekt" gezeigt wird.