HTML5-Tutorium: JavaScript: Hello World Vue 03: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Die Seite wurde neu angelegt: „{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}} '''Musterlösung'''<br/> [{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v03</code>…“ |
Kowa (Diskussion | Beiträge) |
||
| Zeile 22: | Zeile 22: | ||
Mögliche Storekonzepte | Mögliche Storekonzepte | ||
* vuex (veraltet, wird nur noch gewartet, angeblich nicht mehr weiterentwickelt, aber Version 4 existiert) | * [https://miro.com/app/board/o9J_l5NFbJQ=/?moveToWidget=3458764523964816792&cot=14 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) | * [https://miro.com/app/board/o9J_l5NFbJQ=/?moveToWidget=3458764523964816792&cot=14 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 <code>ref</code>, <code>reactive</code> und <code>computed</code> aus Vue 3.2 (vgl. Vue 3 — [https://medium.com/@mario.brendel1990/vue-3-the-new-store-a7569d4a546f The New Store]) | * ohne Bibliothek direkt mit <code>ref</code>, <code>reactive</code> und <code>computed</code> aus Vue 3.2 (vgl. Vue 3 — [https://medium.com/@mario.brendel1990/vue-3-the-new-store-a7569d4a546f The New Store]) | ||
Version vom 18. April 2023, 09:10 Uhr
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)
