HTML5-Tutorium: JavaScript: Hello World Vue 03
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 3 (zu größeren Teilen überprüft) |
Umfang: 4 (unwichtige Fakten fehlen) |
Quellenangaben: 3 (wichtige Quellen vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 3 (gut) |
Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6
Musterlösung
Git-Repository, git checkout v03 (JavaScript)
Git-Repository (TypeScript), git checkout v03
Stores mit Hilfe von Klassen:
Git-Repository, git checkout v03b (JavaScript)
Git-Repository (TypeScript), git checkout v03b
Anwendungsfälle (Use Cases)
Gegenüber dem ersten und zweiten Teil des Vue-Tutoriums ändern sich die die Anwendungsfälle nicht. Die Anwendung leistet also genau dasselbe wie zuvor.
Aufgabe
Aufgabe: Speichere den Zustand der Anwendung (Model) in Store-Objekten, um die künftige Modularisierung (Version v04) zu unterstützen.
In diesem Tutorium sollen die Daten in einem Store außerhalb der Komponenten gespeichert werden.
Mögliche Storekonzepte
- vuex (veraltet, wird nur noch gewartet, angeblich nicht mehr weiterentwickelt, aber Version 4 existiert)
- Pinia (der Nachfolger von vuex; einfacher zu benutzen; Vue-3- und Vue-2-Paradigmen werden unterstützt, aber leider noch nicht das Vue-3.2-Script-Setup-Paradigma)
- ohne Bibliothek direkt mit
ref,reactiveundcomputedaus Vue 3.2 (vgl. Vue 3 — The New Store)
Wir verwenden Pinia.
Erstellen eines neuen Projektzweigs
Erstellen Sie einen neuen Projektzweig (branch) innerhalb von hello_world_vue:
git checkout v02 # Wechsle in den Branch v02
git checkout -b v03 # Klone v02 in einen neuen Branch v03
Fortsetzung des Tutoriums
Sie sollten nun Teil 4 des Vue-Tutoriums bearbeiten. Nun wird die Anwendung modularisiert.
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
