Vue. js: Erstelle eine Full Stack App mit Firebase, Vuex & Vue Router

1. Willkommen beim Kurs!: Willkommen zu diesem Kurs. Es ist toll, dich hier zu haben. Mein Name ist Chris. Ich bin ein Webentwickler und Online-Kursteilnehmer, der Tausende von Studenten auf der ganzen Welt unterrichtet. Ich habe diesen Kurs erstellt, um alle JavaScript-Fähigkeiten auf die nächste Stufe zu bringen. Hier in diesem Kurs werden wir eine vollständige Stack-Anwendung mit Vue.js erstellen, eines der beliebtesten Front-End-Frameworks, die heute verfügbar sind. Wir werden eine Pizza-Restaurant-Anwendung bauen , in der ein Benutzer Bestellungen aus unserem Restaurant-Menü aufgeben kann. Außerdem haben wir die Möglichkeit, dass sich der Restaurantbesitzer in einem Admin-Bereich anmelden kann. Dieser Abschnitt ermöglicht es uns, Artikel aus unserem Menü hinzuzufügen oder zu entfernen, aktuelle Bestellungen zu sehen und auch Bestellungen zu entfernen, wenn sie abgeschlossen sind. Dieses Projekt wird die neueste Cloud Firestore von Firebase für das Back-End unserer Anwendung verwenden , die verwendet wird, um alle Menüpunkte zusammen mit allen Bestellungen zu speichern. Wir werden auch Firebase für die Authentifizierung nutzen. erlaubt dies nur autorisierte Benutzer in unseren Admin-Bereich, zusammen mit bestimmten Sicherheitsregeln. Außerdem werden wir einen lokalen Vuex-Store mit Firebase synchronisieren , um unseren Anwendungsstatus zu verwalten. Dies ermöglicht es uns, alle benötigten Informationen einfach an einem zentralen Ort abzurufen und zu verwalten . Außerdem erfahren Sie mehr über den Vue Router, dem Sie die Navigation zwischen den Seiten in unserer App verwalten können. Hier lernen Sie viele Konzepte wie das Hinzufügen von Navigationshilfen und das Definieren des Scroll-Verhaltens, um nur einige zu nennen. Wir gehen sogar zu einigen fortschrittlicheren Konzepten, wie Lazy Loading und Code Splitting, um die Anwendung effizienter zu laden. Der ideale Schüler für diesen Kurs wird jemand sein, der komfortabel ist, Websites mit ein wenig JavaScript-Wissen, Erfahrung von Vue.js, oder sogar ein anderes Framework oder eine Bibliothek wie React zu bauen Websites mit ein wenig JavaScript-Wissen, Erfahrung von Vue.js, , wird ein Vorteil sein, obwohl ich versuchen werde, machen Sie die Dinge so klar wie möglich für Menschen, die neu in Vue.js sind. Dieser Kurs ist ideal für Studenten, die sehen möchten, wie alles in einer echten Telefonanwendung zusammenpasst. Am Ende dieses Kurses werden Sie zum vollständigen Erstellen von vollständigen Stack-Anwendungen mit Vue.js und Firebase. Melden Sie sich jetzt an und ich hoffe, Sie im Kurs zu sehen. Bringen Sie Ihre Vue Fähigkeiten auf die nächste Stufe. 2. Was du für diesen Kurs brauchst: Für diesen Kurs gibt es nur ein paar Dinge, die Sie benötigen, und sie sind alle kostenlos zu verwenden und herunterzuladen. Sie haben wahrscheinlich schon die meisten von ihnen. Zuerst ist der Zugang zu einem Terminal. Wenn Sie einen Mac verwenden, können Sie ein integriertes Terminal verwenden. Um darauf zuzugreifen, können Sie die Spotlight-Suche verwenden , indem Sie den Befehl und die Leertaste zusammen drücken. Suchen Sie dann, indem Sie das Terminal eingeben. Wenn Sie Windows verwenden, können Sie ein Programm wie die PowerShell verwenden, die im Lieferumfang von Windows enthalten ist. Sie können dies finden, indem Sie PowerShell in die Windows-Suchleiste eingeben. Machen Sie sich keine Sorgen, wenn Sie mit dem Terminal nicht vertraut sind. Wir brauchen nur ein paar Befehle und wir werden sie zusammen tun, wenn es nötig ist. Sie werden auch einen guten Web-Texteditor benötigen. Für diesen Kurs verwende ich den Visual Studio-Code. Dies hat auch ein eingebautes Terminal, das uns die Dinge noch einfacher macht. Da wir ein Terminal ziemlich viel während des Projekts verwenden werden. Aber natürlich, fühlen Sie sich frei zu wählen, was Sie bevorzugen. Wir müssen auch Node.js und npm installiert. Diese wurden von nodejs.org heruntergeladen. Ich habe Node.js bereits installiert. Wenn Sie dies nicht tun, klicken Sie auf die neueste Version und laden Sie sie für Ihr bestimmtes Betriebssystem herunter. Beim Herunterladen von Node wird auch die neueste Version von npm2 installiert , ein Knoten-Paketmanager, der zum Herunterladen von JavaScript-Paketen verwendet wird, die wir während dieses Kurses verwenden werden. Als Nächstes ist die Vue CLI. Wenn Sie zu github.com/vuejs/vue-cli gehen. Hier erfahren Sie mehr darüber, was die Vue CLI ist. Sie müssen Nodes herunterladen, bevor Sie dies tun, da Node eine Voraussetzung für die Vue CLI ist. Die Vue CLI oder Kommandozeilenschnittstelle, ist ein Werkzeug, das es uns ermöglicht, Vue js Anwendungen schnell mit einem schnellen Terminal-Befehl zu gerüsten . Es hat verschiedene Vorlagen, die wir verwenden können, um Apps von einer einzigen HTML-Seite zu erstellen, richtige Frucht komplexe Web-Pack-Setups. Wir werden eine einfache Web-Pack-Version verwenden, wenn ein zu dieser Episode kommen. Wir werden die Installation der Vue CLI in Kürze behandeln, wenn dieses Projekt gestartet wird. Wenn Sie jedoch dieses Handbuch lesen möchten, um mehr über die Vorlagen zu erfahren, oder sogar voran und installieren. Fühlen Sie sich frei, dies jetzt zu tun, wenn nicht, fahren Sie fort, und wir werden dies bald installieren. 3. Projektaufbau mit dem Vue-CLI: Ich werde dieses Projekt mit einer View-CLI erstellen, um schnell unsere neue App zu erstellen. Wenn Sie die Ansicht CLI vorher nicht verwendet haben, Es ist ein großartiges Werkzeug, um schnell Gerüst aus der Anwendung und aufstehen und mit View-Projekt wirklich schnell laufen. Es enthält alles, was wir brauchen, um View-Anwendungen auszuführen, einschließlich es auf Links wie Web Pack, und gibt uns Optionen, um andere Plug-Ins wie Bubble und Linda zu installieren. Wenn Sie dies bereits installiert haben, ist das großartig und fahren Sie fort. Wenn nicht, müssen Sie einen Befehl im Terminal ausführen, um dies einzurichten. Ich werde das eingebaute Terminal mit Visual Studio-Code verwenden, und natürlich können Sie ein eigenständiges Terminal verwenden, wenn Sie es bevorzugen. Gehen Sie zu Visual Studio-Code. Ich habe das Terminal bereits unten geöffnet. Wenn Sie nicht auf die Optionen oben auf dem Bildschirm klicken, gehen Sie zum Terminal und dann zum neuen Terminal. Ich werde eine View-CLI global installieren, so dass sie für alle Projekte verfügbar ist und npm verwendet. Der Befehl, der benötigt, ist npm Ich habe dash g flag installieren, so dass dies global installiert ist. Dann ist das Paket, das Sie brauchen, @ vue /cli gab dies ein paar Momente zu installieren, und dann werde ich Sie sehen, wenn dies fertig ist. Mit der jetzt installierten vue cli können wir dies verwenden, um unser neues Projekt innerhalb des Terminals wieder zu erstellen, ich bin momentan innerhalb des Root-Benutzerverzeichnisses. Ich werde den Befehl cd verwenden, um in den Desktop zu wechseln. Hier werde ich das Projekt hinzufügen. Natürlich können Sie einen beliebigen Ort Ihrer Wahl verwenden, um dieses Projekt aufzuhalten. Wir können dann das Projekt in einem Terminal mit dem Befehl Ansicht erstellen initialisieren. Dann der Name unseres Projekts, das ich die Pizza nennen werde - Planet. Es trat ein, um unsere Projekte zu erstellen. Ich werde mit der Standard-Blase beginnen und ja Objektiv, drücken Sie“ Enter“. Dies wird lernen, installieren Sie die Plugins, die erforderlich ist, also wieder, ich werde wieder kommen, wenn dies getan ist. diese nun abgeschlossen ist, sollten Sie nun den Projektordner auf dem Desktop hier haben. Ich gehe weiter und ziehe dies in Visual Studio Code, automatisch die neuen Dateipfadfotos erkennt und dies innerhalb des Terminals hinzufügt. bedeutet, dass wir keine Verzeichnisse in diesen neuen Ordner ändern müssen und noch einmal werde ich das Terminal öffnen, da dies neu gestartet wurde, wir im Pizza-Planeten-Ordner. Alles, was wir jetzt tun müssen, ist, unseren Entwicklungsserver mit dem Befehl npm, run serve zu starten . Fangen wir damit an. Ich werde auch den Browser öffnen, wo wir mit unserem lokalen Host darauf zugreifen können. Wir können hier sehen, unser lokaler Host läuft auf Port 8080, also werde ich Befehl oder Kontrolle klicken Sie darauf, dann öffnen Sie dies innerhalb des Browsers. Dies ist die Standardansicht, die wir sehen, wenn Sie View CLI verwenden und wenn Sie diese Seite sehen, funktioniert alles gut. Ich gehe in das Quellverzeichnis, wo immer vue Dateien gespeichert sind, und gehe dann in die Haupt-App vue und mache nur ein wenig Bereinigungsarbeit mit dieser Datei. Ich werde das Bild und die HelloWorld-Komponenten entfernen. Wir können diese Helloworld-Komponente auch entfernen, da wir unsere eigene und auch die HelloWorld-Referenz aus unserer Vue Instanz erstellen werden . Dieses div innerhalb unserer Vorlage ist, wo wir alle Inhalte hinzufügen können , die Sie innerhalb unserer App erscheinen möchten. Beginnen wir mit dem Hinzufügen von „p“ -Elementen. Dann können wir hier einfach Hallo sagen, speichern Sie diese Datei und gehen Sie zum Browser und alle Änderungen werden automatisch aktualisiert. Als nächstes werde ich die Bilder zu unserem Assets-Ordner hinzufügen, so dass diese bereits, wenn wir sie brauchen. Die Bilder wurden mit diesem Kurs zur Verfügung gestellt, und ich habe diese auf dem Desktop verfügbar. Sie können natürlich einen anderen Satz von Bildern verwenden, wenn Sie es bevorzugen, oder den genauen, die ich verwende, folgen. Öffnen wir die Seitenleiste und gehen zu unseren Vermögenswerten, die sich innerhalb der Quelle befinden. Wir können den Bilderordner packen und diesen hier nach innen ziehen, und alle unsere Bilder sind jetzt verfügbar, wenn wir sie brauchen. Wir brauchen natürlich einen Komponentenordner zu und dies wird nun automatisch erstellt Fotos, wenn Sie die vue CLI verwenden. Um zu beginnen, werde ich einige Komponenten hinzufügen, die eine einzelne Datei sein werden. Lassen Sie uns auf Komponenten klicken, fügen Sie eine neue Datei hinzu, und die erste wird die home.Vue sein. Der zweite wird Foto Header.Vue sein. Wir können auch das HelloWorld-Beispiel durch das Löschen entfernen. Da wir das für unser Projekt nicht brauchen, haben wir das hier. Gehen wir zum nächsten Video über, wo wir beginnen, einige Inhalte zu diesen neuen Komponenten hinzuzufügen. 4. Kopfzeilenkomponente: Ich werde mit den Header-Komponenten beginnen, die wir im letzten Video erstellt haben, das unser Logo, unseren Website-Titel, zusammen mit einigen Links zu anderen Seiten haben wird . Innerhalb dieser Header.vue, lassen Sie uns beginnen, indem Sie unsere Vorlage erstellen, die eine Header-Elemente enthalten wird. An der Spitze unserer Kopfzeile werden wir ein div haben, das ein Rapper-Bubble-Logo sein wird, und auch unser Website-Titel. Wir können eine Klasse zu unserem div hinzufügen. Wir können dies mit dem CSS in nur einem Moment des Header-Logos verknüpfen. Im Inneren hier, das erste, was ich tun werde, ist, unser Bild hinzuzufügen und das Bild, das innerhalb der Assets im Bilderordner enthalten ist, wird für die planet.jpg sein, also werde ich dies verknüpfen. Dies stammt aus dem../Schrägstrich Assets, dem Ordner images und dem Namen planet.jpg. Als alter Text werde ich ein Pizza-Planeten-Icon hinzufügen, gefolgt von einer Überschrift der Ebene eins, die auf unsere Homepage verlinken wird. Wir können den href als Schrägstrich und dann den Titel von PIZZA PLANET hinzufügen. Kurz nach unserem umgebenden div mit unserem Logo können wir dann unsere Links zu verschiedenen Bereichen oder verschiedenen Komponenten unserer Anwendung hinzufügen. Lassen Sie uns diese innerhalb eines nav Element hinzufügen. Um zu beginnen, werde ich eine weitere Liste hart codieren, bis wir an der Front sind und später im Kurs mit dem View-Router weiterleiten. Die ungeordnete Liste, das erste Listenelement, das auch ein Link sein wird, wird zu einer Home-Route mit Schrägstrich verlinken. Der Linkname des Standorts. Bei jedem Link werde ich ein Span-Element mit dem Tilda-Symbol hinzufügen, um jeden einzelnen zu trennen. Der nächste werde ich die Spanne und auch das Listenelement kopieren. Fügen Sie das hier ein. Dies ist ein Link zu unseren Menükomponenten, die vorwärts/menu ist. Der nächste ist für die Kontaktseite. Die href wird einfach weitergeleitet oder kontaktiert. Der letzte ist für die über diesen Link. Fügen wir das hier hinzu. Das braucht nicht die Spannweite. Wir werden das bewegen. Der Text von über uns. Die href ist einfach weiter/über. Das nächste, was wir für unseren Header brauchen, ist, die Skripte hinzuzufügen. Das einzige, was wir jetzt hinzufügen müssen, ist der Name unserer Komponenten. Der Name wird der App-Header sein. Das nächste, was ich nach der Vorlage und dem Skript tun wollte, ist auch den Style Abschnitt hinzuzufügen, in dem wir diese Stile für Header hinzufügen können. Fügen Sie auch dieses Schlüsselwort mit Geltungsbereich ein, was bedeutet, dass die Stile nur für diese einzelnen Komponenten gelten und nicht für den Rest der Website. Beginnen wir mit der Auswahl unserer Überschrift der Ebene 1, die für den Website-Titel gilt. Wir können die Schriftgröße ein wenig größer machen. Ich möchte meine auf 1,3 ms setzen. Wenn wir unsere Vorlage direkt oben erstellt haben, umgeben Sie einen inneren Untertitel und auch unser Logo. Wir haben dieses div mit der Klasse des Header-Logos. Ich werde diese Klasse verwenden, um einen linearen Farbverlauf hinzuzufügen , der einige Streifen als Hintergrundbild bilden wird. Lasst uns das schnappen. Unmittelbar unter unserem H1. Wir können dies als eine Klasse nehmen, die das Hintergrundbild setzt. Das Hintergrundbild wird ein linearer Farbverlauf sein. Um unsere Streifen in einem Winkel von 45 Grad durch Komma zu trennen, müssen wir jetzt auch die Stufen hinzufügen, die die Farben erscheinen werden. Ich werde zwischen zwei Farben wechseln, um die Streifeneffekte zu erstellen. Auf der ersten Farbe, die ich hinzufügen werde, ist ein x-Wert von d85226 und dann 25 Prozent. Dies bedeutet im Grunde, dass der Beginn des Gradienten von Null bis zu 25 Prozent aus dieser Farbe besteht. Wir können dann unsere zweite Farbe hinzufügen, die der Wert von f79e38 sein wird. Diese Farbe wird von 25 Prozent bis 50 Prozent gelten. Im zweiten Quartal des Gradienten, für das dritte Quartal, werden wir zurück zu unserer ursprünglichen Farbe wechseln. Lassen Sie uns das gleiche hinzufügen. Das wird von 50 Prozent bis zu 75 Prozent sein. Für das letzte Viertel des Farbverlaufs wechseln wir zurück zu unserer helleren Farbe. Fügen wir das hier hinzu. Das werden wir ab 75 Prozent laufen. Wir können dann unseren Farbverlauf mit der gleichen Farbe beenden. Dies läuft bis zum Ende der Farbverläufe, das ist 100 Prozent. Wir können dann die Größe mit der Eigenschaft Hintergrundgröße angeben, die ich auf einen Wert von 80 Pixel setzen werde. Dann 80 Pixel. Der Anzeigetyp wird flex sein. So wird der Flex uns erlauben, die Flex-Richtung hinzuzufügen, um Spalte zu sein, wodurch unsere Gegenstände übereinander gestapelt werden können. Wir erhalten das Website-Logo oben auf dem Website-Titel. Wir können auch die Eigenschaft ausrichten Elemente hinzufügen, setzen Sie diese im Sensor. Dann beenden Sie schließlich die Dinge mit etwas Polsterung auf der Oberseite einiger Pixel. Halten Sie dies von der oberen Seite des Browsers fern. Aber wir fügen weitere Stile hinzu. Lassen Sie uns dies zu unserer app.vue hinzufügen. So können wir dies innerhalb des Browsers sehen. Denken Sie daran, dass alle Dateien, die wir erstellt haben, eigenständige Einzeldateikomponenten sind. Was bedeutet, sagen Sie eine Ansicht genau, wo wir wollen, dass dies in unseren Projekten erscheinen. Die app.vue ist unsere Hauptkomponenten und wir können dies als Wrapper für alle unsere Komponenten verwenden. Um am Anfang unserer Skripte zu beginnen, müssen wir einen Import hinzufügen, wo wir unseren Header aus dem Dateipfad der Punktschrägkomponenten und dieser Header importieren . Wir benötigen eine Komponenteneigenschaft, die wir bereits aus dem Inhalt zur Verfügung gestellt haben , wenn wir diese mit der Ansicht CLI erstellt haben. Hier können wir also den App-Header hinzufügen, gleich dem Header ist, den wir gerade importiert hätten. Wenn Sie also Komponenten in einer Vue registrieren, sollten wir keinen reservierten Elementnamen wie Header verwenden. Was wir hier tun, ist, die Header-Komponente zu einem Alias des App-Headers zu setzen. Wir können daher Referenzen nach oben hatte eine Schleife in unseren Vorlagen, wo wir wollen, dass dies auf dem Bildschirm erscheinen. So können wir dies verschieben und innerhalb von Kleinbuchstaben den App-Header mit einem öffnenden und einem schließenden Element hinzufügen . Alternativ können wir ein selbstschließendes Tag genauso verwenden. Das wird auch funktionieren. Ich habe einen Fehler, der hier erscheint, und es ist der Dateipfad aus dem Header. Lasst uns das einfach reparieren. Das soll PNG sein. Also speichern Sie das. Jetzt können wir zum Browser gehen. Wir sehen nun unser Logo mit den linearen Farbverläufen im Hintergrund. Wir haben auch den Seitentitel und auch unsere Navigationslinks nur hier. Um dieses Video zu beenden, lassen Sie uns den Rest dieser Links etwas Styling hinzufügen und wir können das Logo auch ein wenig kleiner machen. Also zurück zum Header.vue. Wir können nach unten zu unseren Stilen scrollen. Beginnen wir mit dem Targeting auf das Header-Logo-Bild. So hatte es ein Logo, wir können das Bildelement greifen und dann die maximale Breite p-Wert von 25 vw, die 25 Prozent der View-Port-Breite. Als nächstes bin ich für alle Links am unteren Rand Styling, wir können die ungeordnete Liste greifen. Stellen Sie die Polsterung auf einen Wert von 10 Pixeln oben und unten, Null auf der linken und rechten Seite. Wir können auch die Listenelemente auswählen und auch die Anzeige als Inline-Block festlegen. Speichern Sie das. Außerdem werden wir endlich eine Medienabfrage hinzufügen, die dieses Bild ein wenig kleiner machen wird , wenn wir 900 Pixel und höher erreichen. Lassen Sie uns dies direkt nach unserem Listeneintrag hinzufügen. Bei Medien zielen wir auf diese Bildschirme ab, die eine Mindestbreite von 900 Pixeln haben. Wir können dann unser Header-Logo-Bild anvisieren, das Sie gerade hier haben. Wir können dies im Inneren hinzufügen und dies auf einen Wert von 20 vw fallen. Also, jetzt auf einem kleineren Bildschirm, ist dies ein Körper von 25 Prozent. Wir können auf 900 Pixel erhöhen. Dann sehen wir, dass das Bild nach unten fällt, um es ein wenig kleiner zu machen. Das ist es. Jetzt für unseren Header, werden wir später auf diese Komponenten zurückkommen, wenn wir ein Front-End-Routing hinzufügen. Aber jetzt gehen wir auf unsere Homepage. 5. Startseitenkomponente: Jetzt ist es an der Zeit, den Inhalt der Homepage-Komponentendatei hinzuzufügen. Wie wir hier aus dieser endgültigen fertigen Version sehen können, wird das Hinzufügen des Willkommensabschnitts, das ist dieser Abschnitt nur hier. Dies wird zu unserem Menü verlinken, wenn der Benutzer auf die Schaltfläche „Let's Order“ klickt. Wenn wir zurückgehen, direkt unterhalb dieses Abschnitts können wir auch drei separate Abschnitte haben, die die Bestellung, Lieferinformationen und die Geschichte Abschnitt sind. Diese Informationsblöcke sind tatsächlich separate Komponenten und dies ermöglicht es uns, sie später wiederzuverwenden. Wir können zwischen ihnen wechseln, wenn wir den View-Router einrichten. Also für jetzt werden wir diese drei Komponenten weglassen, und konzentrieren uns auf diesen Abschnitt gerade hier. Gehen wir auf die home.vue, die Komponente ist, die wir bereits eingerichtet haben. Wir können damit beginnen, in unserer vertrauten Vorlage zu erstellen und dann innen hier verschachtelt, werde ich zwei divs hinzufügen. Das erste div wird also der Wrapper sein. Dies wird der Hintergrund-Wrapper sein , der der umgebende Container sein wird, wo wir ein Bild mit CSS hinzufügen können, darin verschachtelt ist, werden wir einen Hintergrund-Overlay-Wrapper haben , der für die Box in der Mitte. Also das erste. Lassen Sie uns die Klasse des Hintergrunds hinzufügen, die für das Bild ist. Das zweite div, dies ist für die Box mit der Klasse der Hintergrundüberlagerung. Also innerhalb des Hintergrund-Overlays werden wir mit der Überschrift der Ebene zwei beginnen, die der Text von Welcome to Pizza Planet ist. Danach fügen wir unser Bild hinzu, das ist das Rollenbild, das wir gerade hier haben. Lassen Sie uns das Bild hier hinzufügen, das die Quelle von../ist. Dies ist der Ordner Assets in die Bilder und die roller.png. Wir können auch die ALT-Tags von Roller hinzufügen und dann von der Ebene drei Überschrift gefolgt, die der Text von „Fühlen Sie sich hungrig?“ Aber jetzt werden wir nur eine einfache Schaltfläche hinzufügen, diese Schaltfläche wird später angeschlossen, wenn wir den vue Router hinzufügen. Also für jetzt werden wir einfach eine h Taste hinzufügen. Wir können eine Klasse für das Styling der Bestellung- btn und den Text hinzufügen „Lassen Sie uns bestellen!“ Das ist also der gesamte Inhalt für unsere Vorlagen. Kurz bevor Sie weitermachen, können wir auch unser Skript hinzufügen und innerhalb des Skripts alles, was wir tun werden, ist einen Namen für unsere Komponenten innerhalb der Export-Standardwerte mit dem Text von zu Hause hinzufügen . Speichern Sie diese Datei. Genau wie wir es mit dem Header getan haben, können wir innerhalb der app.vue Datei verschachteln und diese Home-Komponente registrieren. Gehen Sie zur app.vue, gehen wir runter. Wir können auch nach Hause importieren, von unseren Komponenten, die ist./ Komponenten und dann zu Hause. Wir müssen dies dann registrieren, indem wir dies zu den Komponenten-Objekten hinzufügen. Wir können eine Komponente hinzufügen, genau wie wir es hier getan haben, wo wir sie durch einen Namen wie Header oder eine andere Möglichkeit importieren , ist es, den Namen zu verwenden, den wir beim Importieren verwenden, also einfach zu Hause und das ist in Ordnung, wenn es keine Namenskonflikte mit HTML -Elemente. Genau wie früh, als wir es mit dem Header getan haben, ist dies ein HTML-Elementname, daher mussten wir diesen Alias von App-Header geben. Also, jetzt haben wir das importiert. Wir können nach oben gehen, direkt unter dem App-Header, wir können unser Zuhause hier hinzufügen. H, speichern Sie diese Datei. Ich werde überprüfen, dass dies im Browser angezeigt wird, sagt, dass ich eine Komponente jetzt auf der Homepage angezeigt habe. Wir werden in nur einem Moment etwas Styling hinzufügen. Moment werde ich jedoch den Leerraum entfernen, der sich oben auf der app.vue befindet, also lassen Sie uns nach unten scrollen. Wir könnten das Standard-Styling entfernen, das dort zur Verfügung gestellt wird, wo es über Projekte sagt. Dies schiebt nun den Header zurück nach oben und wir können jetzt alle nach home.Vue gehen, können wir unsere Style-Tags einrichten. Ich werde das Bereichs-Flag entfernen und dann mit unseren Überschriften beginnen. Wir scrollen nach oben, wir haben eine Ebene zwei und auch eine Ebene drei Überschrift. Beginnen wir mit diesen und geben Sie die h2 und auch die h3 ein und fügen Sie eine Marge von zwei Prozent hinzu. Kurz danach können wir dann den Hintergrund anvisieren, der der Hauptcontainer ist. Hier werden wir das Hintergrundbild hinzufügen, das sein wird, und wir werden einen Blick auf die endgültige Version werfen, dieses Bild, wie wir hier sehen. Lassen Sie uns den Hintergrund auswählen. Zunächst möchten wir das Bild einstellen, was wir mit der Hintergrundeigenschaft tun können, indem wir die URL setzen und dann einen Dateipfad übergeben. Der letzte Weg, den wir wollen, ist. /, das ist der Ordner Assets Bilder, und dann das Bild, das Sie wollen, ist dough.jpg wir können auch diese zentrieren. Legen Sie dann die Hintergrundgröße auf Abdeckung fest. Wenn wir dies speichern und zum Browser gehen, haben wir jetzt das Hintergrundbild. Ich werde die Höhe auf 30vh einstellen. Das entspricht 30 Prozent des Vue Ports oder der Browserhöhe. Legen Sie den Anzeigetyp fest, der die Flexbox verwendet werden soll. Wir können den Text in der Mitte ausrichten. Schließlich können wir auch unsere Box in der Mitte ausrichten und wir werden dies vertikal ausrichten, indem wir Elemente ausrichten, dies ist eine Flexbox-Eigenschaft und wir wollen den Wert in der Mitte zu sein. So können wir jetzt zum eigentlichen Hintergrund-Overlay übergehen, das ist der Text und auch das Bild und die Schaltfläche. Unmittelbar unter dem Hintergrund. Dies ist das Hintergrund-Overlay. Wo wir auch die Display-Art von Flex nutzen wollen. Wir können die Flex-Richtung Spalte sein, um diese vertikal zu füllen. Wir brauchen auch einen Hintergrund, so dass dies besser über dem Hintergrundbild sichtbar ist. Ich werde einen Wert von f1e6da verwenden. So können Sie immer noch das Hintergrundbild sehen. Ich werde auch den positiven Wert von 0,8 hinzufügen, um dies etwas transparent zu machen. Wir können das hier sehen. Wir können die Breite kontrollieren. Ich werde einen Wert von 50 Prozent verwenden. Zentrieren Sie dies mit Marge Null Auto. Einige Polsterung innerhalb von fünf Pixeln. Lassen Sie uns den Text vom inneren Rand fernhalten. Okay, also ist alles Norrow zentriert. Wir müssen die Größe dieses Rollenbildes reduzieren. So werden wir wieder in der Hintergrunde-Overlay zu bekommen, wählen Sie das Bild und wir können sagen, dass die maximale Breite ein Wert von 15 Prozent sein. Wir müssen das jetzt wieder in die Mitte schieben. Wir können dies mit der Flexbox im Hintergrund-Overlay tun. Ich setze Elemente in ausrichten, um in der Mitte zu sein. Da gehen wir, und dann gehen wir endlich auf die Schaltfläche „Order“ und geben diesem eine andere Hintergrundfarbe und auch etwas Polsterung. Also direkt am Ende unserer Stylesheets. Wir gaben dieser Schaltfläche die Klasse der Ordnung, wenn dieser Aufruf unsere btn, die diese Klasse gerade hier ist. Also lasst uns das packen, füge das hinzu. Beginnen wir zuerst mit der Hintergrundfarbe, die f79f38 sein wird, einem Grenzradius und wir wollen diese klein halten, so dass ein Wert von drei Pixeln in Ordnung ist, etwas Rand auf der Unterseite von 10 Pixeln. Etwas Polsterung, um den Ball in ein wenig größer von 10 Pixeln zu machen. Wir können dann den Cursor auswählen, um einen Zeiger zu sein. Also speichern Sie das und gehen Sie zu den Projekten. Wir haben nun die Hintergrundfarbe, den Grenzradius und unser Cursor ändert sich nun zu einem Zeiger. Dies ist nun unsere grundlegende Homepage Setup und wird im Browser angezeigt. Im nächsten Abschnitt werden wir uns darauf konzentrieren, unser Menü und unseren Warenkorb alle Setup, um Daten von Firebase zu erhalten. 6. So erstellst du die Menükomponente: Als wir unsere Header-Komponenten erstellt haben, haben wir einen Link zum Menü hinzugefügt. Diese Menükomponente, an der wir jetzt arbeiten werden, wird schließlich sein, wo wir alle Menüpunkte aus unserer Datenbank heranziehen. Wenn wir einen Blick auf die endgültige Version werfen und in das Menü gehen, werden diese Elemente auf der linken Seite aufgelistet, die der Benutzer auswählen kann, welche Stücke er bestellen möchte. Sie werden dann in den Warenkorb von auf der rechten Seite hinzugefügt, das kann auch die Menge erhöhen oder verringern und dann schließlich die Bestellung aufgeben. Diese Bestellung wird auch an Firebase weitergeleitet und ist auch bei unserem Admin erhältlich. Sowohl die Menüpunkte als auch die Bestellungen werden synchron mit einem zentralen Speicher zwei innerhalb unserer Anwendung gehalten , die wir später betrachten werden. Fügen wir nun die menu.vue Komponenten innerhalb unseres Komponentenordners hinzu. Lassen Sie uns in die Soße gehen, innerhalb der Komponenten. Das Menu.vue. Der erste Teil besteht darin, unsere Vorlage zu erstellen, die nur eine HTML-Tabelle sein wird, um unsere Daten anzuzeigen. Diese Tabelle wird verwendet, um unsere Pizzen mit den Namen und Optionen zur Verfügung zu stellen. Dies wird nur statische Informationen für den Moment sein, bis wir später mit Firebase arbeiten. Um zu beginnen, fügen wir unsere Vorlagen hinzu, dann können wir im Inneren ein div hinzufügen, das die Klasse des Menüs auf dem Himmel Wrapper haben wird. Innerhalb dieses div wird dies unsere Speisekarte und auch die Körbe haben. Für jetzt werde ich einen Kommentar des Menüs haben , damit wir klar sehen können, welcher Abschnitt dies ist. Wir können dann ein div mit einer Klasse von Menü hinzufügen. Im Inneren von hier werden wir eine Ebene drei Überschrift haben, die der Text authentischer handgemachter Pizza sein wird Wir werden dann unsere Tabelle einrichten , in der einige Beispieldaten vorerst vorhanden sind. Ebene drei Überschrift, ich werde diese innerhalb der Tilde umgeben, so authentische handgemachte Pizza. Dann können wir unseren Tisch direkt unten aufstellen. Wir werden keinen Tabellenkopf haben, also werde ich nur direkt zum Tabellenkörper springen. Innerhalb des Tabellenkörpers werden wir freie Tabellenzeilen einrichten. Die erste wird für den Pizza-Titel sein, eine zweite Zeile für die Beschreibung und dann eine dritte Zeile, die für die Optionen sein wird. Innerhalb der ersten Tabellenzeile können wir unsere Tabellendaten hinzufügen. Dann werde ich innerhalb der Tabellendaten diese starken Tags hinzufügen, um dies fett zu machen, und dann einen Pizza-Namen innerhalb der Tilde. Ich werde Pepperoni hinzufügen, gefolgt von einer Tilde am Ende auch. Das ist unsere erste Reihe. Der zweite wird für die Beschreibung sein. Fügen Sie eine neue Zeile direkt unter den Tabellendaten hinzu und dann wird dies die kleinen Tags sein , um dies ein wenig kleiner zu machen, ich werde einige Lorem Ipsum hinzufügen. Wenn Sie Visual Studio Code verwenden, können Sie das Wort Lorem eingeben und dann Tab drücken, oder Sie können beliebige Beispieldaten hinzufügen, es spielt wirklich keine Rolle, da dies sehr bald aus Firebase gezogen wird. nach dieser Tabellenzeile Lassen Sie unsnach dieser Tabellenzeileeine weitere erstellen, die für unsere Optionen sein wird. Unsere Tabellendaten, die mit einer 9-Zoll-Pizza beginnen. Unmittelbar unten können wir auch den Preis hinzufügen. Ich werde 695 gefolgt von einer Schaltfläche hinzufügen, also td, und dann können wir hier unseren Knopf hinzufügen, der das Plus-Symbol sein wird, um dies zu unseren Körben hinzuzufügen. Die Schaltfläche benötigt eine Art von Schaltfläche und auch eine Klasse für das CSS, die wir einst btn underscore green, ein rechtes Plus-Symbol genannt haben. Im Moment haben wir keine Möglichkeit, Ansicht zu sagen, dass wir wollen , dass diese Komponenten angezeigt werden, wenn wir auf die Schrägstrich Menü Routen klicken. Da wir noch kein Router-Setup haben, als temporäre Maßnahme können wir es als temporäre Maßnahmein die app.view-Datei hinzufügen, damit wir sehen können, dass es innerhalb des Browsers ist. Beginnen wir damit, dies direkt unter den Home-Komponenten zu importieren . Wir wollen unsere Speisekarte, unsere Speisekarte von hier. Wir können dies auch direkt unter dem Haus registrieren, und dann fügen Sie dies oben in unserer Vorlage. Schauen wir uns das an. Über im Inneren des Browsers, so dass wir gehen, so haben wir unseren Titel, wir haben unseren Pizza-Titel, unsere Beschreibung und auch die Option direkt unten. Diese Option wird eine Schleife sein, daher werden wir später, wenn wir die Datenbank verwenden, die verfügbaren Optionen durchschauen und die verschiedenen Größen und Preise anzeigen. Ich werde nur den Rechtschreibfehler innerhalb des Menüs korrigieren. Da gehen wir. Mit diesem jetzt an Ort und Stelle, können wir jetzt etwas Stil in unsere Menükomponenten hinzufügen. Leichte Kopf über die menu.vue. Wir können dann nach unten scrollen. Wir können unsere Style-Tags einrichten. Ich werde dies als Bereichsbereich für diese Komponente belassen, also gilt dies nur für diese einzelne Datei und nicht für den Rest des Projekts. Beginnen wir mit unserer Level-3-Überschrift, die der authentische handgemachte Pizza-Titel ist. Alles, was wir hier tun müssen, ist, den Text auszurichten, sein in der Mitte zu sein. Als nächstes öffnen Sie das Ziel, den Menü-Wrapper. Denken Sie daran, dass der Menü-Wrapper der Hauptcontainer sein wird. Es würde nach oben gehen. Dies wird unsere Speisekarte und auch die Körbe umgeben. Wenn wir uns die endgültige Version ansehen, bedeutet dies, wenn wir dies nach unten scrollen, dass das Menü und auch der Korb vertikal auf einem kleineren Bildschirm gestapelt werden, dann fügen wir eine Medienabfrage hinzu, so dass diese erscheinen Seite an Seite. Lass uns jetzt runtergehen und damit beginnen. Um dies zu tun, können wir den Anzeigetyp zu flexbox ändern, und dann auf dem kleineren Bildschirm können wir die Flex-Richtung auf Spalte festlegen. Wir werden eine Medienabfrage Änderungen sehr bald wieder in Zeile hinzufügen. Lassen Sie auch Targeting das Menü, das ist die linke Seite. Ich werde die Hintergrundfarbe so einstellen, dass sie ein Wert von F1, E6, DA, ein Grenzradius ist , der drei Pixel sein wird. Wir können dies auch die volle Höhe des Browsers machen, indem wir es zu einem 100 vh senden. Im Moment sieht es ziemlich klein aus, weil wir ein Element erhalten möchten, aber wir können dies auch ohne den Inhalt in voller Höhe zum Browser sehen. Dies muss Höhe Eigenschaft 100 vh sein, etwas Rand von zehn Pixeln, fügen Sie einige Abstände, und auch einige Polsterung von zehn Pixeln, die Innenseite des Menüs. Speichern Sie das, scrollen Sie nach unten und es gibt unser Menü. Jetzt müssen wir nur eine Medienabfrage hinzufügen, um dies zu einer Reihe auf den größeren Grüns zu machen. Noch innerhalb der Style-Tags können wir die Medienabfrage hinzufügen, die die Bildschirme mit einer Mindestbreite von 900 Pixeln anvisiert. Dann wollen wir nur noch den Menü-Wrapper greifen , den wir hier haben. Dann ändere ich die Flussrichtung nach unten und füge auch etwas Abstand dazwischen hinzu, so dass sich die Flexrichtung in Zeile ändert. Wir können dann auch rechtfertigen, dass der Inhalt zwischen sein kann. Das bedeutet auch, dass wir später, wenn wir auch unsere Körbe haben, auch etwas Platz zwischen dem Menü und den Korbbereichen haben. Auf diesem größeren Bildschirm müssen wir das Menü auch so einstellen, dass es eine bestimmte Breite hat, damit es nicht die volle Breite des Browsers überspannt. Wir können dies tun, indem wir die Menüklasse anvisieren und dann die Breite auf einen Wert von 65 Vw einstellen. Ich bin wieder zu unseren Projekten gekommen. Wir sehen nun, dass wir auf der rechten Seite etwas Platz für alle Körbe haben. Wenn wir dies verkleinern, wird dies nun die volle Breite des Browsers sein. Dann wird dieser und auch der Korb später vertikal gestapelt. Okay, diese Tabelle sieht jetzt so aus, wie wir es wollen, aber wir müssen Dinge einrichten, um ein Menü mit mehreren Elementen durchlaufen zu können. Wir werden dies im nächsten Video tun, wo wir ein Objekt hinzufügen , um mehr Elemente in unserer Tabelle anzuzeigen. 7. Looping durch Menüpunkte: Alle unsere Pizza-Informationen werden schließlich in einer echten Datenbank gespeichert. Aber jetzt werde ich einige Menüpunkte in unsere Dateneigenschaft hinzufügen, um mit zu arbeiten. Ich werde dies innerhalb der Menüpunktansicht-Komponente tun. Wir müssen ein Skript-Tag nur unter unserer Vorlage hinzufügen. Wir können dann unsere vertrauten Exportstandard hinzufügen , wo wir unsere Dateneigenschaft hinzufügen können, um alle Pizzen zu speichern. Innerhalb der return-Anweisung werde ich ein Objekt erstellen, um diese in den genannten get-Menüelementen zu speichern. Für jetzt werden wir dies nur als leeres Objekt einrichten. Mit diesem Kurs ist eine Textdatei namens Pizza-Objekt , die alle Daten enthält, die wir benötigen. Stellen Sie diese auf dem Desktop zur Verfügung. Ich werde das aufmachen. Dann können wir alle Inhalte greifen und sie in unsere Daten einfügen. Lassen Sie uns alle auswählen, kopieren Sie diese. Fügen Sie dies dann innerhalb von get Menüeinträgen ein. Alles, was wir hier haben, sind verschiedene Objekte. Der erste ist ein Objekt, das eine Margarita enthält. Wir haben eine Beschreibung und dann innen hier haben wir ein Options-Array. Wir haben unsere zwei Größen. Wir haben eine neun Zoll und auch eine 12 Zoll Pizza mit dem entsprechenden Preis. Dann haben Sie einen zweiten Artikel , der eine Pepperoni ist, auch mit der Beschreibung und den beiden Optionen. Mit dieser Dateneigenschaft jetzt verfügbar, können wir Ansichten v für Direktive verwenden. Um durch unsere Daten zu schauen, können wir dies innerhalb der Tabelle tun , wo wir alle statischen Daten im letzten Video hinzugefügt. Um auf den umgebenden Tabellenelementen zu beginnen, werde ich die v für die Direktive verwenden, die durchsucht werden soll. Wir können v für hinzufügen. Wir sagen dann Punkt in get Menüpunkte. Menüpunkte erhalten ist das Objekt, das zu unserer Dateneigenschaft hinzugefügt wird. Wir speichern dann jede einzelne Pizza innerhalb dieses Artikels Variable, so dass wir zugreifen können, ist innerhalb unseres Tisches. Wir werden damit beginnen, den hartcodierten Wert von Pepperoni innerhalb der doppelten geschweiften Klammern zu entfernen. Wir können dann auf den Punkt Punkt Namen zugreifen. Mit all dem innerhalb der kleinen Zeiten können wir die Lorem Ipsum entfernen. Wir können tatsächlich geschweifte Klammern verdoppeln, es sei denn, ich möchte auf die Artikelpunktbeschreibung zugreifen. Speichern Sie dies im Browser und wir können sehen, ob dies funktioniert. Wir sehen, wir haben ein kleines Problem. Wenn Sie Vue.js verwenden, und dies ist auch das gleiche, wenn Sie React to verwenden, wenn Sie vorher aufgebraucht haben. Wir müssen jedem Element einen Schlüssel hinzufügen. Wir sehen, dass die Ansicht die v-Bind-Direktive mit einem eindeutigen Schlüssel erwartet. Zu beheben ist, wenn eine Schleife verwendet wird. Wir können auch sehen, dass wir die rote Unterstreichung im Texteditor haben. Wir können auch eine dynamische Schlüsseleigenschaft mit dem Doppelpunkt und dann Schlüssel binden. Für jeden einzelnen Artikel müssen wir diesen eindeutigen Schlüssel hinzufügen. Dies ist alles Ansicht besser, behalten Sie den Überblick über jedes Element, wenn wir hinzufügen, entfernen oder aktualisieren Sie eine Liste Elemente. Im Moment enthält unser Pizza-Objekt einzigartige Pizza-Namen. Wir können einfach aufbrauchen. Wir können item.name sagen. Wir können sofort beim Speichern sehen, dass unsere Menüpunkte sind und jetzt hinzugefügt werden. Ein besserer Wert für einen Schlüssel wäre jedoch eine eindeutige ID. Bei späterer Nutzung unserer Datenbank wird für jedes Element in der Datenbank eine eindeutige ID generiert. Wir können zurückkommen und diesen Schlüssel später ändern. Aber jetzt unsere kostenlosen Artikel, die Sie in unseren Daten haben. Das nächste, was zu tun ist, ist eine zweite Schleife zu erstellen, die alle Optionen durchlaufen wird. Im Moment haben wir nur den hartcodierten Wert der neun Zoll Pizza. Wenn wir zu unserer Dateneigenschaft gehen, haben wir zwei Möglichkeiten. Wir haben die beiden Werte von neun und 12 Zoll bedeutet, dass wir eine zweite Schleife hinzufügen können, um diese zu durchlaufen. Wenn wir die Tabellenzeile mit der Dimensionierung innerhalb der öffnenden Elemente lokalisieren, können wir eine zweite Schleife hinzufügen würde vier sein. Hier drinnen werden wir unsere individuellen Optionen durchlaufen. Denken Sie daran, dass wir unsere einzelnen Pizzen in dieser Item-Variable gespeichert haben. Wir können auf Artikel zugreifen. Optionen, und dann können wir jede einzelne Option in einer Variablen namens Option speichern. Wir können dann unsere dynamischen Daten einrichten. Anstelle der hartcodierten Werte können wir die doppelten geschweiften Klammern fragen. Dies kann option.size mit dem doppelten Anführungszeichen kurz danach sein, um zu signalisieren, dass dies in Zoll ist. Wir können dann den Preis entfernen, setzen Sie die doppelten geschweiften Klammern auf option.price. Sobald wir das speichern, sehen wir wieder, dass wir ein Problem mit der v-Bind-Richtlinie haben. Wir müssen dies auch zu unserer zweiten Schleife zwei hinzufügen. Fügen wir einen Schlüssel hinzu. Wir müssen diesen beiden auch einen eindeutigen Wert hinzufügen. Wir haben nur zwei Elemente innerhalb unseres Options-Arrays. Daher können wir die Arrays Indexnummer als eindeutigen Schlüssel verwenden. Wir können dies erfassen, indem wir einen zweiten Wert 12 vor Schleife hinzufügen. Anstatt nur die Optionsvariable hinzuzufügen, können wir zu den Klammern hinzufügen und dann einen zweiten Wert hinzufügen, der für unsere Indexnummer ist. Da dies ein Array ist, wird dies die Option Null sein. Dann Option eins und so weiter. Beim Übergeben des Schlüssels als Option mit der Indexnummer. Speichern Sie dies und jetzt im Browser sehen wir unsere neun und 12-Zoll-Optionen. Gut gemacht, wenn Sie die drei Elemente auf dem Bildschirm sehen können. Wenn nicht, mach dir keine Sorgen, geh einfach wieder durch. Überprüfen Sie den Code und versuchen Sie es erneut, bis sie auf die Bühne kommen. Begleiten Sie mich im nächsten Video, wo wir mit den Menükomponenten fortfahren und die ausgewählten Pizzen in die Einkaufskörbe schieben werden. 8. So schiebst du Aufträge in ein Array: Im letzten Video haben wir die Menüpunkte erfolgreich zu diesen Menürouten hinzugefügt. Sie können aus der endgültigen Version sehen, wenn Sie dorthin gehen und dann zu unseren Menükomponenten gehen, dass wir noch den Warenkorb auf der rechten Seite der Seite hinzufügen müssen. Wenn der Benutzer auf eine „Pizza“ klickt, klicken Sie auf das „ Plus-Symbol “, wird der Artikel auf der rechten Seite im Warenkorb angezeigt. Auch das Korbhaus brennt, um die Menge zu ändern und der Gesamtpreis wird ebenfalls aktualisiert. In diesem Video werden wir den ersten Schritt machen, um dies zu schaffen, indem die Körbe Array hinzufügen, um die Pizzen zu speichern, die der Benutzer zu den Körben hinzufügt. Wenn Sie noch nicht da sind, wählen Sie die Menükomponenten aus Visual Studio Code aus. Das erste, was ich tun werde, ist, eine Dateneigenschaft namens Korb hinzuzufügen, die ein Array sein wird. Bis zu unseren Skripten, innerhalb unserer Daten. Lassen Sie uns direkt über erhalten Menüpunkte hinzufügen. Wir können unseren Korb als leeres Array initialisieren, dann fügen Sie kurz danach ein Komma hinzu. Dieses Array wird verwendet, um die Pizzen zu speichern, die vom Benutzer ausgewählt wird. Die anderen Stücke zu diesem Array, müssen wir eine Methode auf die Add to Basket Schaltfläche hinzufügen. Scrollen wir nach oben zu unserer Schaltfläche. Innerhalb des Buttons öffnenden Tags werde ich mit einem Klick einen „Event Handler“ hinzufügen und dies auf eine neue Methode setzen , die Sie noch nicht erstellt haben AddToBasket genannt. AddToBasket wird zwei Dinge aufnehmen. Die erste ist das Element, und dann die zweite ist die Option. Bei dem Artikel handelt es sich um den einzelnen Artikel aus unserer Schleife, wie z.B. eine Margherita. Die Option ist die Option, welche Pizza-Größe ausgewählt wurde, so dass die neun oder 12 Zoll Version. Scrollen Sie nach unten, können wir jetzt die AddToBasket Methode hinzufügen. Kurz nach unserer Dateneigenschaft ist das okay, es ist die schließende geschweifte Klammer und ein Komma. Wie wir unser Methodenobjekt so einrichten können. Ich werde dies als async einrichten, so dass wir einen JavaScript-async/await-Methodennamen verwenden können, war addToBasket, das Element auf die Option nimmt, die übergeben wird, wenn sie aufruft. Was möchten Sie, dass diese Methode in der Lage sein soll? Nun, ich will nicht sagen, dass Pizza in unseren Warenkorb gelegt wird. Wir möchten einen neuen Artikel in unser Korb-Array schieben. Wir können die JavaScript-Array-Methode namens push verwenden, um dies zu tun. wir also die Seife, wir können unsere Körbe auswählen. Mit diese.baskets können wir die JavaScript-Push-Methode verwenden. Der Artikel, den wir schieben wollen, ist ein neues Pizza-Objekt. Wir können das aufstellen. Wir können den Namen von unserem Artikel holen, der weitergegeben wird. Dies ist die vollen Pizza-Objekte. So können wir das Element fallen lassen und dann den individuellen Namen auswählen. Wir können auch das gleiche für den Preis tun. Wir können einen Gegenstand greifen, wählen Sie den Preis der Pizza. Auch die Größe. Die Größe ist innerhalb der Optionen verfügbar. Wir greifen die Option, dass Größe. Schließlich wollen wir auch die Menge auf einen Anfangswert von eins setzen. Jetzt, wenn dies vorhanden ist, können wir dies einen Test geben. Wenn wir zu unseren Vorlagen scrollen, können wir versuchen, den Wert des Warenkorbs auszugeben und überprüfen, ob dieser mit jeder neuen Pizza aktualisiert wird. Kann dies überall innerhalb unserer Vorlage haben , dass Sie einfach den Wert der Körbe ausgeben. Gehen Sie zu unseren Projekten und in die Speisekarte. Lassen Sie uns versuchen, auf einen dieser zu klicken. Das ist die 30,5 cm große Margherita. Sie haben den Namen und auch die Größe im Inneren von hier. Versuchen wir eine Neun in Schinken und Ananas. Dies wurde zu unserem Warenkorb hinzugefügt. Wenn wir aber voran gehen und die gleiche Pizza hinzufügen, noch einmal. Immer wenn neun Zoll Ananas, können wir das Innere unseres Arrays sehen, wir haben jetzt drei einzelne Elemente statt die Menge erhöht. Wir können dies noch weiter verbessern, indem wir zuerst prüfen ob sich ein Artikel bereits in den Körben befindet. Wenn nicht, fügen wir die neue Pizza hinzu. Wenn es bereits im Warenkorb ist, wird die Menge um eins erhöht. Gehen wir zurück zu unserer Methode im Inneren von hier. Bevor wir unsere Pizza auf das Array schieben, lassen Sie uns zuerst den Inhalt des Arrays überprüfen. Wir können eine Konstante namens PizzaExists erstellen. Im Inneren hier werden wir auf this.baskets warten und dann nutzen Sie die JavaScript-Find-Methode. Find ist nichts spezifisches, um js anzuzeigen. Es ist tatsächlich eine JavaScript-Array-Methode, die einen Wert des ersten Elements zurückgibt , der der Bedingung entspricht, die wir zur Verfügung stellen werden. Die Konditionierung ist zu überprüfen, ob der Pizza-Name und die Größe bereits zu den Körben hinzugefügt wurden. Hier drinnen haben wir gesagt, dass wir durch Funktion eine Inline-Pfeilfunktion hinzufügen möchten. Hier suchen wir durch unser Array und jedes Element, das gefunden wird, wird in dieser Stückvariable mit unerwünschter Überprüfung gespeichert. Wenn der pizza.name gleich item.name ist. Dies ist die Pizza erinnern, die an unsere Methode übergeben worden war. Wir wollen auch zwei verfolgen, wenn die pizza.size gleich unserer option.size ist. Wenn die Pizza-Größe und auch der Pizza-Name, ist es beide in unserem Korb gefunden. Dies bedeutet, dass dies wahr sein wird. Wir können eine if-Anweisung einrichten. Wir können sagen, wenn Pizza existiert, dann wollen wir die Menge um eins erhöhen. Wir können dies mit PizzaExists.Quantity++ tun. Was ich aus unserer Funktion zurückgeben möchte da wir die Push-Methode direkt darunter nicht ausführen müssen. Speichern Sie diese Datei, und jetzt gehen wir zum Browser. Wir können versuchen, am Ende eine 12 Zoll Pepperoni, eine neun Zoll. Grenzwerte sind ein zweiter 12 Zoll, und die Menge wurde auf 2, 3 und 4 erhöht. Probieren wir es noch einmal aus. Sagen wir Schinken und Ananas. Die Menge wird jetzt mit jedem Artikel erhöht, der mit diesem hinzugefügt wurde jetzt an Ort und Stelle unsere Körbe funktionieren jetzt korrekt. Es sieht in einem Moment nicht toll aus. Aber unsere Daten sind für das nächste Video da. 9. So fügst du den Einkaufskorb hinzu: Wir haben einen großen Schritt in Richtung unseres funktionierenden Warenkorbs im letzten Video gemacht , indem wir unsere hinzugefügten Artikel in ein Array schieben. Jetzt können wir eine Tabelle erstellen, um die alten Elemente durch Schleifen durch dieses Array anzuzeigen. Lassen Sie uns zurück zu den Menüpunktansicht-Komponenten gehen. Nun, ich werde diesen Korb am Ende hinzufügen, knapp über unserem schließenden div für das Menü. Scrollen Sie über zu den Vorlagen, und denken Sie daran, dass wir unseren Menübereich mit der Menüklasse erstellt haben. Lassen Sie uns das Ende unserer Speisekarte finden. Stelle unseres Korbes nur hier, stelle sicher, dass wir noch das schließende div am Ende für unseren Haupt-Wrapper haben. Beginnen wir mit dem Hinzufügen eines Kommentars. Dieser ist für unseren Warenkorb, unser Warenkorb braucht ein div, und ich werde diesem eine Klasse von Korb geben. Wir können dies in der CSS sehr bald verwenden, wir werden jetzt eine Level-freie Überschrift an der Spitze hinzufügen. Ich möchte eine Tilde zu beiden Seiten hinzufügen, mit dem Text alle Körbe. Lassen Sie uns beginnen, unsere Tabelle für alle unsere Korbdaten zu erstellen. Die Tabelle wird den Tabellenkörper und dann unsere erste Tabellenzeile haben. Die Tabellenzeile benötigt einige Tabellendaten mit den TD-Elementen und dieses erste Stück Daten wird für die Erhöhungs- und Verkleinerungsschaltflächen sein. Wenn Sie sich die fertige Version ansehen, werden dies die Plus- und Minus-Tasten und auch die Menge in der Mitte sein, fügen wir dann ein zweites Stück Tabellendaten hinzu, die für unsere Pizza sind, einschließlich Größe und dann schließlich der Preis am Ende. Das erste Element wird unsere Schaltfläche enthalten. Dies wird die h kleine Entität haben, die ein kaufmännisches Und-Zeichen, den Hash, dann den Wert von 8.722 mit einem Semikolon sein wird. Dies wird uns unser negatives Symbol geben, um es von der Menge abzuziehen. Sie können auch eine Klasse hinzufügen, dies wird der Wert von btn Unterstrich grün sein. Aber unser CSS, ich werde das duplizieren. Dies ist für die Plus-Schaltfläche, die eine h kleine Entität des kaufmännischen Unds, des Hash und dann der Wert von 43. Dazwischen wollen wir auch ein Span-Element hinzufügen, das für die Menge ist. Ich werde das alles als Wert von 2 hinzufügen. Unter unserer td können wir unseren zweiten Satz von Daten hinzufügen, die für den Pizza-Namen und auch die Größe gefolgt von Alpha Stück Daten für diese Zeile, die für den Preis ist, und jeder Preis ist in Ordnung. Wir kommen wieder und machen diese Dynamik sehr bald. Sie können dies sagen und sehen, wie das in den Projekten aussieht. Wir haben unsere Knöpfe, unsere Menge, und auch die Pizza-Informationen, zusammen mit dem Preis, Definition unserer Vorlagen. Um die endgültige Version, müssen wir auch diese Bestellsumme direkt unter unserer Tabelle hinzufügen. Ich möchte nur hören, dass wir ein p Elemente mit den Tags aller Summe und einem Doppelpunkt hinzufügen können und dann können wir eine Schaltfläche hinzufügen, um den Ort der Bestellung zu finden. Diese Schaltfläche kann auch eine Klasse haben, die den Rest mit dem Klassennamen btn grün, speichern und aktualisieren übereinstimmt . Nur um dieses Video abzuschließen, werde ich auch einige CSS zu diesem Korb hinzufügen, so sehr wie das Menü auf der linken Seite. Scrollen wir nach unten in unsere Style-Tags, ganz unten. Wir werden einige gemeinsame Styling mit dem Menü teilen. Wir können auch die Körbe hinzufügen. Das ist eine Klasse. Dies gibt uns die gleiche Hintergrundfarbe und Rahmenradius, die wir hier sehen , und auch, um es die volle Breite des verfügbaren Raumes zu machen. Scrollen wir nach unten zu unserer Medienabfrage. Die Speisekarte hat 65 Prozent eingenommen. Wir können die Korbbreite hinzufügen, nehmen wir den Rest des Inhalts, der 35vw ist, und da gehen wir. So werden nun unsere Warenkörbe mit einigen statischen Daten angezeigt. Gehen wir nun zum nächsten Video über, in dem wir unsere Korbdaten durchlaufen und innerhalb dieser Tabelle anzeigen. 10. So machst du den Einkaufskorb dynamisch: Wir haben jetzt eine Warenkorb-Tabelle auf dem Menübildschirm, die einige statische Daten zeigt. Um unsere Daten dynamisch zu machen, können wir den Inhalt des Körbchen-Arrays durchlaufen, genau wie wir es mit dem Menü auf der linken Seite getan haben. Wir wissen bereits, dass das Korb-Array alle Informationen hat, die wir brauchen. Lassen Sie uns diese for-Schleife zu unserer Tabelle hinzufügen, ich gehe zu den Menükomponenten. Scrollen wir nach oben zu unserer Baskets Tabelle, und suchen Sie die öffnende int Tabelle Tag. Drinnen hier haben wir unseren Tischkörper, wo wir unsere v für eine Schleife hinzufügen können. Der Artikel, den wir durchlaufen wollen, ist der Korb. Wir möchten jeden einzelnen Warenkorb-Artikel in der Artikelvariablen speichern und wir können als zweiten Wert auch unsere Indexposition hinzufügen, die wir als Schlüssel verwenden können. Wir haben unseren dynamischen Schlüssel kombiniert und diesen auf unseren Index gesetzt. Das nächste, was zu tun ist, ist, auf unsere statischen Daten zu gehen. Das erste Stück ist die Artikelmenge, so dass innerhalb der doppelten geschweiften Klammern wir innerhalb der doppelten geschweiften Klammernauf unseren Artikel zugreifen und die Menge von unserem Objekt abholen können. Scrollen Sie das nächste Stück nach unten ist die Pizza drinnen und auch die Größe. Zunächst einmal greifen wir den item.name und dann als zweiter Wert innerhalb eines zweiten Satzes von geschweiften Klammern, können Sie auch die item.size hinzufügen. Darunter haben wir auch den Preis, also lassen Sie uns die 695 ändern , um die item.price und seine Antwort auf Artikel zu sein, sagen Sie dies und jetzt offensichtlich Browser lassen Sie uns einige Elemente auf der rechten Seite hinzufügen. Ich werde sehen, dass die Menge mit jedem Jupiter-Artikel erhöht wurde wird ein neuer Artikel auf eine neue Zeile hinzugefügt, jetzt fehlt nur der Preis des Endes. Werfen wir einen Blick, wir haben den item.price. Lassen Sie uns einfach unsere Methode unten überprüfen. Dies ist nur von der Option, also lasst uns dies ändern und jetzt wieder über. Wir können versuchen, dies noch einmal hinzuzufügen, und wir sehen den Preis. Wenn wir jedoch die Menge eines dieser Artikel nach oben, sehen wir, dass die Menge erhöht wird, aber der Gesamtpreis ist nicht. Dies ist etwas, das wir leicht beheben können, wir werden den Preis ausgeben. Lassen Sie uns wieder nach oben scrollen, wir können den Preis mit der item.quantity multiplizieren. Dies wird uns einen Gesamtpreis geben, so dass wir sehen, dass dies aktualisiert wurde. Wir können eine weitere hinzufügen und der Preis wird mit jedem Klick aktualisiert. Gut, also jetzt, wenn wir dem Browser eine Aktualisierung geben, wollen wir den Text und auch die Bestelltaste verstecken, wenn keine Pizzen hinzugefügt wurden. Wir können unsere Körbe mit bedingtem Rendering ausblenden und nur anzeigen, wenn das Korb-Array eine Länge größer als Null hat. Zurück zu unserem Korb, der das umgebende div gerade hier ist, werde ich diese Tabelle mit einem zweiten div umgeben , wo wir seinen Inhalt anzeigen und verstecken können. Fügen Sie hier ein div hinzu und dann können wir av if Direktive hinzufügen, um zu überprüfen, ob unsere basket.length größer als Null ist. Dieses div wird nur angezeigt, wenn ein Element zu unserem Array hinzugefügt wurde. Wir können das schließende Tag ausschneiden und dann bis zum Ende unseres Tisches scrollen. Beim schließenden div, direkt nach unserem Order-Button. Direkt unten können wir eine andere Bedingung innerhalb eines separaten div hinzufügen. Wir können v sonst sagen, so dass der Inhalt hier eine Nachricht innerhalb der p-Elemente sein wird. Ich werde diese Nachricht dynamisch machen und dies auf eine Variable namens Korbtext setzen. Innerhalb der sub direkt unten in der Datumseigenschaft setzen Sie unseren Korbtext, wo wir eine Nachricht an den Benutzer Ihres Warenkorbs anzeigen können, ist leer. Speichern Sie dies, neu laden und es gibt unseren Text Ihres Warenkorbs ist leer, mit bedingtem Rendering und jetzt, wenn wir einen Artikel zu unserem Array hinzufügen, wird dieser jetzt entfernt und wir sehen die Artikel in unserem Warenkorb. Sie fragen sich vielleicht, warum wir unsere Nachricht hier als Datumseigenschaft einrichten, anstatt einfach den Text innerhalb unserer p Elemente hinzuzufügen. Nun, das liegt daran, dass wir später, nachdem wir unsere Bestellung aufgegeben haben, diese Nachricht auch als funky Nachricht erhalten werden. Es wird später nützlicher, nächstes fügen wir kleine Methoden zu unserem Warenkorb hinzu. Wir werden unsere Erhöhungs- und Reduziertasten hier verkabeln, zusammen mit dem Entfernen von Gegenständen aus dem Korb 11. Einkaufskorbmethoden: Wir haben jetzt einen Warenkorb mit den Pizzen, die der Benutzer auswählt. Es gibt einige zusätzliche Funktionalität und ich möchte es hinzufügen, um dies zu verbessern. Zuerst können wir die Plus- und Minus-Tasten funktionieren, so dass wir die Menge jedes Artikels ändern können. Auch in diesem Zusammenhang, wenn die Menge auf Null reduziert wird, möchten wir, dass dieser Artikel aus dem Warenkorb entfernt wird. Beginnen wir mit der Einrichtung der Methoden, um die Menge wieder über im Menü der Komponenten zu ändern . Wir müssen damit beginnen, einige Klick-Handler zu diesen beiden Schaltflächen hinzuzufügen. Lassen Sie uns nach oben scrollen und werfen Sie einen Blick auf unsere beiden Tasten, die dieser Abschnitt gerade hier ist. Das erste, was wir tun müssen, ist, einen Klick-Handler für die Minus-Taste hinzuzufügen. So können wir @click hinzufügen und dies gleich einer Methode namens Abnahme Menge setzen. Wenn wir diese Menge verringern, müssen wir auch wissen, welchen Artikel wir reduzieren, damit wir den Artikel übergeben können. Der Plusknopf direkt darunter. Dies wird in ähnlicher Weise funktionieren. Dies dauert einen Klick-Handler, wo wir die Menge erhöhen werden. Auch das Übergeben des Artikels wollen wir erhöhen. Jetzt scrollen wir nach unten zu unserem Skript, wo wir unsere Methoden erstellen können. Also lassen Sie uns einen Blick auf diese werfen. Direkt unter unseren Daten, suchen Sie das Ende unserer Add-to Basket Methode, die sie ist. Die erste, die ich hinzufügen werde IncreasEquantity, die wir erhalten den Gegenstand vorbei, um es. Das Erhöhen des Artikels ist ziemlich unkompliziert. Alles, was wir tun möchten, ist, den item.quantity auszuwählen und den Wert um eins mit plus, plus zu erhöhen. Ich werde dies mit einem Komma kopieren, wo Sie die Menge verringern können. Alles, was wir dafür tun müssen, ist zu negativ zu wechseln, und dann sind wir gut zu gehen. Speichern und dann in den Browser. Lassen Sie uns einige Elemente in einem hier hinzufügen. Also zuerst, wir haben eine Pepperoni. Wir können dies erhöhen und die Menge wird zusammen mit dem Preis erhöht. Lassen Sie uns versuchen, dies abzuziehen und dann diese Null zu nehmen. Wenn wir weitermachen, bekommen wir einen negativen Wert. Natürlich ist das nicht etwas, was wir wollen. So können wir dies beheben, indem wir eine Methode erstellen, um den Artikel zu entfernen, wenn die Menge Null ist. Also gehen Sie zu unseren Methoden. Ich werde hier eine neue Methode erstellen, die RemoveFromBasket genannt wird. Dies wird auch in das Element nehmen, das Sie entfernen möchten. Wir können die JavaScript-Spleißmethode verwenden, um das Element aus unserem Array zu entfernen. Wir können this.basket auswählen, die unser Array ist. Wir können die JavaScript-Spleißmethode aufrufen. Innerhalb der Klammern können wir zwei Parameter hinzufügen. Die erste ist die Indexposition des Elements, das wir entfernen möchten. So können wir dies mit this.baskets.indexOf, wo wir in unserem Artikel übergeben werden. Dies wird also die Indexposition unseres Artikels im Array finden. Der zweite Parameter ist die Anzahl der Elemente, die wir entfernen möchten. Wir wollen nur einen entfernen. Für diese Methoden funktionieren. Zuerst müssen wir es nennen, wenn die Artikelmenge Null ist. Darunter kann in der Notwendigkeit verringert Menge Methode hinzugefügt werden. Lass uns runtergehen. Wir können zu kaufen if Anweisung setzen, um zu überprüfen, ob die item.quantity gleich Null ist. Wenn dies der Fall ist, möchten wir unsere Methode zum Entfernen aus dem Warenkorb aufrufen, die den einzelnen Artikel einnimmt. Geben Sie dies, um den Browser zu speichern, und wir können einige Elemente hinzufügen. Beginnen Sie, indem Sie die Peperoni, den Schinken und die Ananas entfernen. Das funktioniert jetzt alles gut. Wir haben immer noch den Platz, um warum Gruppe zwei, die unten unten ist. Aber wir können das später betrachten, wenn wir anfangen, mit Firebase und Data Stores zu arbeiten. 12. So strukturierst du den Admin-Bereich: Willkommen zurück, die Admin-Komponente wird ein großer Teil dieser Anwendung mit ziemlich viel Funktionalität zu arbeiten sein. Um zu beginnen, schützen wir die Seite mit dem Login-Formular, wie wir hier auf der endgültigen Version sehen können. Nur autorisierte Benutzer können den Admin-Bereich sehen. Wenn wir uns anmelden, der Rest des Admins dann sichtbar. An der Spitze haben wir den aktuellen angemeldeten Benutzer und auch ein Logo unten, gefolgt von einem neuen Pizza-Abschnitt, und auch seine eigenen Komponenten, damit der angemeldete Benutzer neue Pizzen zum Menü hinzufügen kann, und unten können wir alle Elemente sehen, die derzeit auf dem Menü, und wieder, können wir Elemente aus unserem Menü und auch eine Datenbank zu entfernen. Unten unten haben wir eine Liste der aktuellen Bestellungen, und diese können auch gelöscht werden, wenn sie abgeschlossen sind. Wir beginnen wieder meine Erstellung einer eigenen Komponente namens Admin W, und dann können wir einige grundlegende Struktur hinzufügen. Über zu unserer Seitenleiste in die Komponenten, die unbemannte w. Innen hier können wir unsere Vorlagen hinzufügen, wo wir ein div als Wrapper mit der Klasse von admin hinzufügen werden. Bei diesem Aufruf Wrapper. Dies wird der Haupt-Wrapper für unseren Admin sein. Dies wird innerhalb von Free verschiedene divs haben. Der erste wird für den aktuellen Benutzer sein, dies wird seine eigenen Komponenten sein. Wir werden den Menü-Wrapper haben, und dann unten, die Bestellungen Wrapper. Lassen Sie uns diese divs jetzt hinzufügen. Der erste wird ein div mit der Klasse des aktuellen User-Wrapper sein. Danach wird ein neues div erstellt, das auch die Klasse des Menü-Wrapper haben wird, und der letzte wird der Ordnungen-Wrapper sein , der sich unten setzt. Wir müssen unser Skript direkt darunter hinzufügen, wir geben unseren Komponenten einen Namen. Der Standardwert für den Export. Wir fügen den Komponentennamen hinzu, und wir werden meinen anrufen, den Admin. Speichern Sie diese Datei, und wir können dies innerhalb des Browsers sehen. Wir können dies in der App w hinzufügen. Zuallererst können wir diese importieren. Ich werde diesen Admin aufrufen, und das ist aus dem Dateipfad von Punktschrägstrich Komponenten und dann dem Administrator. Wir müssen diese Komponenten auch in der View-Instanz registrieren. Dies steht für die Verwendung innerhalb der Vorlagen zur Verfügung. Gehen Sie zu den Vorlagen. Wir brauchen diese Speisekarte hier nicht mehr. Ich werde das ändern, um Admin zu sein. Zurück zum Admin, Vorlagen. Ganz oben haben wir diesen aktuellen User-Wrapper , auf den ich später zurückkommen werde, wenn wir Benutzer registriert haben. Denn jetzt können wir nach unten zu dem Menü-Wrapper direkt unten gehen und unsere Tabelle erstellen. Das gibt uns eine Ebene drei Überschrift mit dem Titel Menu. Darunter können wir unseren Tisch konstruieren. Fügen wir den Tabellenkopf ganz oben mit der ersten Tabellenzeile hinzu. Diese Tabellenzeile wird zwei Überschriften haben. Wenn wir zur endgültigen Version gehen, werden diese beiden Überschriften für das Element sein und auch den Text aus dem Element entfernen. Wir können diese hinzufügen, innerhalb der TH-Tags, das Element, und dann direkt unter diesem, können wir auch entfernen aus Menü hinzufügen. Unterhalb des Tischkopfes. Wir können dann den Tischkörper in einer Reihe hinzufügen, und dies wird für unseren Pizza-Namen und auch das Potenzial zu entfernen sein. Die erste Zelle innerhalb der Tabellendaten wird für den Pizza-Namen sein. Ich werde Margarita hier drinnen hinzufügen. Diese wird später aus einer Datenbank gelesen. Aber für jetzt können wir einfach studieren hart codierten Wert gefolgt von einem Knopf. Diese Schaltfläche wird sein, um den Menüpunkt aus der Datenbank zu entfernen. Jemand gibt dieser Art von Schaltfläche eine Klasse von btn_reds, und dann für das Kreuz verwenden wir den HTML-Code, die kaufmännischen Und-Zeiten ist, und dann das Semikolon. Speichern Sie diese Datei und dann über in den Browser, wir haben ein Menü Komponenten, aber nicht über in der App verwendet. Wählen Sie das einfach auskommentieren. Während Instance anzeigen. Wir können den Impuls auch auskommentieren. Nun, ich sehe eine sehr einfache Tabelle mit unseren Menüpunkten unten unten. Die Tabelle ist jetzt vorhanden, und wir werden später darauf zurückkommen, um alle unsere Menüpunkte durchzulaufen, genau wie wir es innerhalb der Menükomponenten getan haben. Ich werde Sie jetzt im nächsten Video sehen, wo wir mit unseren Admin-Komponenten bleiben und beginnen, mit den aktuellen Bestellungen zu arbeiten. 13. So listest du aktuelle Bestellungen auf: Wir können uns die endgültige Version von in den Admin-Komponenten ansehen. Im letzten Video. Wir haben die Tabelle aus ihrem Menüabschnitt erstellt und in einem Beispielelement hinzugefügt. In diesem Video gehen wir nach unten zum nächsten div, das für die aktuellen Bestellungen ist. Dies wird auch eine Tabelle zwei sein, wo wir einen Titel an der Spitze haben werden. Wir werden eine Tabellenüberschrift mit dem Artikel, der Größe, der Menge und dem Preis haben , und ich werde unsere Bestellungen direkt unter und auch mit der Schaltfläche erstellen , um jeden Artikel zu entfernen. Wir erstellen jetzt viele Komponenten und Dinge wie Tabellen. Mit statischen Daten ist nicht das aufregendste, was zu tun ist, aber bleiben Sie dabei, es ist eine gute Praxis und wir werden sehr bald zum Datenbankabschnitt kommen. Also zurück zu den Admin-Komponenten, die die admin.view ist. Jetzt möchte ich zu diesem Ordnungen Wrapper gehen, lassen Sie uns das einfach ändern, und dann können wir hier unsere Level-3-Überschrift mit dem Titel der aktuellen Aufträge konstruieren . Dann werden wir in den Klammern hart codieren in einem Wert. Also sparen wir 5 Bestellungen. Dann direkt darunter können wir unsere Tabelle erstellen. Die Tabelle beginnt mit den Tabellenköpfen, die die Überschriften von Artikel, Größe, Menge und Preis sind. Wir werden diese in ihre eigene Zeile hinzufügen, und dann wird jeder innerhalb einer Tabelle Überschrift Elemente gehen. Der erste ist für einen Artikel. Lassen Sie uns das noch drei Mal duplizieren. Die nächste ist für die Größe, die dritte für die Menge, und die letzte wird für den Preis sein. unter unserem Header-Abschnitt nach unten scrollen, werden wir den Tabellenkörper mit den tbody-Elementen hinzufügen . Nest in unserer ersten Reihe, und diese erste Reihe wird für unsere andere Nummer sein. Ich werde eine Klasse von Ordnung hinzufügen und es heißt Nummer. Es ist Bestellnummer Abschnitt, einen Blick auf die endgültige Website wird diese Zeile, die wir hier sehen. Sie haben eine Bestellnummer und auch eine Schaltfläche, um diese aus der Datenbank zu entfernen. Die meisten werden dies zu einer Zelle zwei machen, indem sie diese Spanne alle vier Spalten machen. Also im Inneren hier können wir eine Tabellenüberschrift hinzufügen. Wir können die Spannweite ganz für uns selbst machen, mit Kreuzspannweite gleich vier. Unsere Bestellnummer, werde ich in den starken Tags hinzufügen. Also Bestellnummer. Ich werde hier jeden Wert setzen, gefolgt von unserer Schaltfläche, die den Typ der Schaltfläche aufnehmen wird, und auch eine Klasse für unser CSS, machen Sie dies rot. Wir haben die Klasse der Schaltfläche von btn_red. Als Wert können wir eine HTML-Entität von kaufmännischen Unds, Zeiten und dann ein Semikolon hinzufügen. Speichern Sie diese und jetzt wollen wir unsere Projekte sehen und scrollen Sie nach unten. Wir haben unsere; Tabellenüberschrift, die Bestellnummer, und auch die Schaltfläche. Das nächste, was zu tun ist, ist, eine neue Zeile hinzuzufügen, die den Pizza-Namen wie angezeigt wird; vegetarisch, die Größe, die Menge und auch der Preis. Eine neue Reihe hier drinnen. Der erste Teil der Tabellendaten ist für den Namen. Ich werde Margarita hinzufügen. Die zweite ist für die Pizza-Größe. Der dritte ist für die Menge, diese sind zu drinnen. Der vierte wird für den Preis sein. Speichern Sie und schauen wir uns das an. Gut. Wir haben jetzt unsere Tabelleninhalte dort, und wir können jetzt ein wenig Styling innerhalb des CSS-Abschnitts innerhalb des Admins hinzufügen, um Komponenten anzuzeigen. Führen Sie einen Bildlauf nach unten durch. Sie können die Stilelemente haben. Dies kann auch auf diese Komponenten zugegriffen werden, wo wir beginnen, indem wir den admin_wrapper, der der Haupt-Wrapper ist , ausrichten . Alles, was ich tun werde, ist, einen Rand von 10 Pixeln hinzuzufügen, die innen verschachtelt sind. Ich werde unsere freien Abschnitte anvisieren; also war der erste current_user_wrapper, der zweite war der orders_wrapper, und der dritte ist für den menu_wrapper. Wir können alle diese drei Abschnitte gemeinsam anvisieren, um das Styling konsistent zu halten. Etwas Rand, um etwas Platz außerhalb des div zu geben, 10 Pixel oben und unten und Null auf der linken und rechten. Einige Polsterung innerhalb der divs von 10 Pixeln. Ein Rahmen, der jeden mit einer durchgezogenen Linie von einem Pixel umgibt, und die Farbe f79e38. Neben unseren Tabellenelementen können wir die Textausrichtung auf der linken Seite einstellen. Wir können die Breite machen. Ich möchte dies auf 70vw setzen, auf 70 Prozent der Sichtpunktbreite. Als nächstes können wir die Bestellnummer Aktion und die Tabellenüberschrift anvisieren , um diesem eine Hintergrundfarbe zu geben, die hellgrau sein wird. Dies ist der Wert von ddd. Schließlich noch einmal die Bestellnummer, aber dieses Mal werden wir die Schaltfläche Ziel. Also die Bestellnummer-Taste, die derjenige ist, um das Element aus der Datenbank zu entfernen. Ich werde nur etwas Marge von Null oben und unten hinzufügen. Fügen Sie links und rechts 10 Pixel hinzu. Geben Sie dies ein Speichern und über an den Browser. Nachladen. Dies ist der aktuelle Bestellabschnitt, der vorerst abgeschlossen ist. Wenn deine so aussieht, herzlichen Glückwunsch. Sie sind jetzt bereit, um eine neue Menüpunkte hinzuzufügen, und wir werden dies im nächsten Video hinzufügen. 14. So fügst du eine neue Pizzakomponente hinzu: Oben im Menü nur fertige Version, dies sind keine neuen Pizza-Abschnitt, ist im Grunde Form, um ein neues Element in die Datenbank hinzuzufügen. Ich werde einen Abschnitt in seinen eigenen Komponenten erstellen, genannt NewPizza.vue. Sie könnten argumentieren, dass dies in der Admin-Datei 2 gehen könnte, was auch in Ordnung wäre. Es ist jedoch ziemlich viel HTML-Code. Die Admin-Komponente macht es also ein wenig aufgebläht. Wie üblich, gehen wir zum Komponentenordner, und wir können unsere neuen Komponenten, im Inneren erstellen. Das wird also NewPizza.vue Erweiterung sein. Im Inneren können wir unsere [unhörbare] Vorlage hinzufügen und wir können eine grundlegende Struktur zu unserem Formular haben. Also das Formular, das die öffnenden und schließenden Tags innerhalb der Ebene frei Überschrift hat. 15. So formst du die Input-Bindungen: Mit dem neuen Pizza-Formular benötigen wir eine Möglichkeit, die Benutzerdaten hinzuzufügen und zu unserer Ansicht Inzidenz zu speichern. Wir können dies leicht tun, indem wir V-Modell verwenden, die bidirektionale Datenbindung erstellt, und dies bedeutet, dass die Werte der Formulareingaben an die Dateneigenschaft abgerechnet werden , bis sperrig synchron gehalten wird. Lassen Sie uns beginnen, indem Sie eine neue Pizza-Objekte innerhalb des Datenabschnitts erstellen. Zu unserer neuen Pizza-Menüdatei würde ich nicht zu unserem Skript-Abschnitt gehen, wo wir die Dateneigenschaft direkt nach dem Komponentennamen hinzufügen werden. Wir können unsere Objekte zurückgeben, wo wir unsere neuen Pizza-Objekte hinzufügen werden. Dieses neue Pizza-Objekt wird eine Struktur bilden , wie unsere Pizza in der Datenbank gespeichert wird. Dieses Objekt folgt der gleichen Struktur wie das, was wir im Menü W Komponenten verwenden. Gehen wir rüber zu unserem Menü. Wir können nach unten gehen, um Menüpunkte in unseren Skripten zu bekommen. Ich werde den gesamten Inhalt eines dieser Objekte kopieren, also brauchen wir nicht die umgebenden geschweiften Klammern. Lasst uns das Array-Schließschild den ganzen Weg bis zu unserem Pizza-Namen nehmen. Wir können das kopieren und dann in unsere neuen Pizza-Objekte. Die Idee hier ist, dies als Vorlage zu verwenden. Ich werde EG am Anfang des Namens und auch EG am Anfang der Beschreibung hinzufügen. Der Grund dafür liegt in der bidirektionalen Datenbindung. Wir haben vorher die bidirektionale Datenbindung erwähnt und wie diese Daten mit unseren Formulareingaben verknüpft werden. Meine Link-Liste ist gut gebildet, es ist tatsächlich, wir werden innerhalb dieser Formulareingaben sehen EG margarita und auch EG, gefolgt von einer Beschreibung, die den Benutzer auffordert, was eingegeben wird. Da dies auf zwei Arten ist, ersetzt der Benutzer dann die Werte innerhalb dieses Objekts, wenn er etwas in diese Eingaben eingibt . Wir können dann weitermachen und diese neue Pizza in die Datenbank schieben. Lassen Sie uns das zuerst mit V-Modell einrichten. Wir können dieses Formular Eingabefelder Schleife innerhalb unseres Formulars verwenden. Gehen wir nach oben. Wir fangen mit dem Namen an. Wir können V-Modell hinzufügen. Dann kombinieren wir dies zu unseren neuen Pizza-Objekten. Dann wird der Feldname des Namens, ich werde diesen Abschnitt kopieren und dann zur Beschreibung gehen. Innerhalb des Textbereichs, lassen Sie uns dies einfügen, und unter der Annahme neuer pizza.description. Hier werde ich auch die anfängliche Rose auf einen Wert von fünf setzen. Wenn X die Option einen Abschnitt und in die Größe haben. Wenn wir in die Eingaben gehen, können wir dies einfügen. Aber dieses Mal wollen wir auf die neue Pizza zugreifen. Wir wollen auf die Optionen zugreifen, die ein Array ist. Der erste Array-Wert ist 0, und wir können auf die Größe zugreifen. Nächste Steigung in Option 1, wir haben den Preis. So viele Pizza, die Optionen immer noch bei der Indexnummer von Null und dieses Mal wollen wir den Preis zugreifen. Für Option 2 beginnen wir mit der Größe. Dies sind Optionen, aber dies ist das erste Element im Array. Bestätigen Sie einfach, wenn wir innerhalb unseres Arrays nach unten gehen, der erste Punkt ist Position 0 und der zweite Punkt ist Position 1. Position 1. Größe. Dann für den Preis, Optionen geboren und dann Preis. Service, neue Pizza-Komponenten und wir können die Stille über im Browser überprüfen. Er wird den Text der EG margarita sehen, die Beschreibung und auch die Größe und Preise erscheinen in den Formularfeldern zu. Das scheint alles in Ordnung zu sein. Um zu überprüfen, dass die Bindung korrekt funktioniert, können wir einen Klick-Listener zu der Schaltfläche unten hinzufügen, die eine Methode auslösen wird. Nach unten können wir einen Klick-Listener ohne Klick hinzufügen und eine Methode einrichten , die ich auf alle View-Instanz aufrufen werde. Nach der Dateneigenschaft können wir hier alle Methoden einrichten. Der Methodenname war ungerade. Drinnen hier für jetzt können wir eine Warnung ausführen, nur mit der Nachricht der Methode ausgelöst und so können wir die Ergebnisse unseres Objekts sehen, das in Echtzeit aktualisiert wird. Wenn wir innerhalb aller Form gehen, können wir auch unsere neue Pizza innerhalb der doppelten geschweiften Klammern mit diesem Punkt neue Pizza ausgeben . Rüber zum Browser. Wir können jetzt unser anfängliches Pizza-Objekt unten unten sehen. Wir können dann alle Änderungen im Inneren vornehmen, und wir sehen, dass sie sofort in unseren Daten reflektiert werden. Wir können auch die Beschreibung erhalten. Wir können die Größe erhalten. Lassen Sie uns versuchen, beide auf die entsprechende Größe zu aktualisieren und Preis ändert sich auch. Gut, was ist jetzt alles an Ort und Stelle? Gehen wir nun zum nächsten Abschnitt in dem wir beginnen, mit unserer Firebase-Datenbank zu arbeiten. 16. So erstellst du die Firebase-Datenbank: die NewPizza-Daten nun erfolgreich erfasst werden, müssen wir nun unsere Datenbank einrichten, um diese Informationen zu speichern. Ich werde Firebase für das Backend des Projekts und insbesondere die neueste Firestall-Datenbank verwenden. Wir werden bald auch ein Paket namens Vivax fire verwenden, um unsere Projektdaten auch mit dieser Datenbank synchron zu halten. Auch später im Kurs können wir auch die Firebase-Authentifizierungsfunktion nutzen, um sicherzustellen, dass nur Anmeldeadministratoren auf bestimmte Daten zugreifen können. Lassen Sie uns den Kopf über firebase.google.com beginnen. Wenn Sie kein Konto haben, müssen Sie sich anmelden und dann zur Konsole wechseln. Innerhalb der Konsole können wir nun ein neues Projekt erstellen. Ich werde hier ein neues Projekt hinzufügen und meinen Pizza Planet anrufen. Klicken Sie auf „Weiter“. Ich werde Google Analytics derzeit nicht aktivieren, also werde ich ein neues Projekt erstellen und diesem nur ein paar Momente geben, um voranzugehen und zu erstellen. Sobald es fertig ist, klicken Sie auf „Weiter“ und Sie sollten zu einer Seite weitergeleitet werden , die dieser ähnelt. Wir werden die Cloud Firestore als Backend verwenden. Sie können entweder auf diesen Abschnitt klicken, um die Datenbank zu erstellen, oder klicken Sie auf die Option im Menü. Dies wird uns mit einer neuen Datenbank für unser Pizza Planet-Projekt beginnen. Klicken Sie auf „Erstellen“. Bevor wir dies erstellen, haben wir zwei Möglichkeiten. Wir haben den Produktionsmodus, dem die Daten sicherer sind, aber wir können im Testmodus starten , der es ermöglicht, unsere Datenbank zum Lesen und Schreiben von Daten offen zu halten. Wir kommen später darauf zurück und ändern unsere Sicherheitsregeln. Klicken Sie dann im Testmodus auf „Weiter“. Wir können dies abschließen und unseren Datenspeicher abschließen. Sobald dies erledigt ist, nehmen wir es dann zu unserem Datenbank-Home-Abschnitt, und sehr bald werden hier alle unsere Daten in unserer Datenbank erscheinen. Wir können auch manuell eine Sammlung hinzufügen, wenn wir wollten. Eine Sammlung ist eine Gruppe von Daten, die unsere Bestellungen und auch unser Menü sein werden. Ich werde auf „Abbrechen“ klicken, da wir Daten aus unserem Projekt übertragen werden , anstatt dies manuell hinzuzufügen. Um diese Datenbank zu unserem Projekt hinzuzufügen, müssen wir auf unsere Firebase-Einstellungen zugreifen, die wir aus der Seitenleiste greifen, und dann Projektübersicht. Wir verwenden Firebase natürlich in einem Webprojekt, also klicken Sie auf das Web-Symbol nur hier. Wir können dann unsere App registrieren. Ich möchte meinen Pizza Planet anrufen. Wir können uns registrieren. Dadurch erhalten wir Zugriff auf unsere Konfigurationseinstellungen, die zu unserem Projekt hinzugefügt werden müssen. Ich werde alle Bedenken von der Konfigurationsoption kopieren, also den API-Schlüssel, bis zur App-ID. Lasst uns das packen und zum Projekt gehen. Innerhalb des Terminals werden wir damit beginnen, dies zu schließen und in Firebase als NPM-Paket zu installieren. Wir können dies mit NPM I tun, auf dem Firebase-Paketnamen. Während dieser Einrichtung können wir dann eine neue Datei im Stammverzeichnis unserer Quelle erstellen. Lassen Sie uns innerhalb der Quelle gehen, innerhalb der Seitenleiste, erstellen Sie eine neue Datei. Dies kann die firebase.js genannt werden, und es wird innerhalb dieser Datei sein, wo wir unsere Konfiguration hinzufügen können. Beginnen wir mit dem Import unseres Firebase-Pakets aus Firebase/App. Als zweiter Import werden wir auch unsere firestore importieren, die von firebase/firestore erhältlich ist. Wenn Sie Firebase in der Vergangenheit verwendet und einfach nur Firebase importiert haben, den moderneren Versionen von Firebase können Sie mit den moderneren Versionen von Firebaseverschiedene Pakete auswählen, wie zum Beispiel die firestore, wird später auch die -Authentifizierung. Diese sind alle in separate Module aufgeteilt. Lassen Sie uns diese Dateigrößen kleiner machen. Wir können dann unsere Konstanten für unsere Konfigurationsoption einrichten . Dies wird ein Objekt sein, in dem wir diese Einstellungen einfügen können, die wir gerade von Firebase ergriffen haben. Kurz danach können wir unsere Firebase-Variable greifen und dann eine Methode verwenden, die initialize App genannt wird. Um unsere App zu initialisieren, müssen wir auch die Konfigurationsoptionen übergeben. Danach können wir auch eine zweite Konstante erstellen, die DB genannt wird, und dies wird eine Abkürzung zu unserer firebase.firestore sein. Mit der Notwendigkeit, eine Datenbankreferenz zu erstellen, werde ich diese Referenz exportieren, damit wir sie an anderer Stelle verwenden können. Wir können eine Konstante namens exportieren, DBMenureF. Dies wird eine Referenz oder eine Verknüpfung zu allen Menü-Sammlungen innerhalb der gesamten Datenbank sein. Die Verknüpfung wird eine mit unserer Datenbank verknüpft sein, und dann den Sammlungsnamen übergeben , der Menü sein wird. Dieser Menüordner wird für uns erstellt, wenn die erste Pizza hinzugefügt wird, wenn sie noch nicht existiert. Daher müssen wir nicht zu Firebase gehen und dies manuell in der Konsole hinzufügen. Jetzt müssen wir alles, was wir innerhalb von irgendwelchen Komponenten tun müssen, ist, diese DBMenureF zu importieren. Dann können wir jede der Firebase-Methoden aufrufen, die wir benötigen, um den Menüpunkt zu speichern, entfernen, zu aktualisieren oder zu löschen. Speichern Sie diese Datei und gehen Sie zurück zur NewPizza.vue Datei. Wir müssen diese Referenz in unsere Skripte importieren. Ich werde dies innerhalb der geschweiften Klammern tun, da dies ein benannter Export ist. Also DBMenureF. Wir können dies aus dem Dateipfad von.. / und unsere Firebase-Datei. Im Moment, wenn wir zu unserem Projekt gehen, wenn wir auf die Schaltfläche „Hinzufügen“ klicken, lösen wir eine Warnung innerhalb des Browsers aus. Aber stattdessen können wir jetzt diese Menüreferenz verwenden und eine Firebase-Methode namens art verwenden, um unsere NewPizza auf Firebase zu schieben. Scrollen wir nach unten und ersetzen Sie unsere Warnungen, indem Sie auf die DBMenureF zugreifen. Greifen Sie auf die Firebase Add-Methode zu, wo wir this.NewPizza schieben werden. Wir müssen unseren Server neu starten, mit NPM Run servieren. Über den Administrator innerhalb unseres Projekts, und ändern Sie den Namen. Ich füge eine Pepperoni hinzu. Wir können auch die Beschreibung ändern, [unhörbar] Mozzarella und pepperoni. Lassen Sie uns auch die Preise ändern, also sieben, und lassen Sie uns diese 11. Klicken Sie auf die Schaltfläche „Hinzufügen“, über zu unserer Datenbank und geht über den Datenbank-Link. Jetzt sehen wir, dass unsere Menü-Sammlung automatisch für uns erstellt wurde. Hier drin haben wir ein Dokument. Dies ist die ID des Dokuments und dann alle Informationen aus unserem Formular. Wir haben unsere beiden Optionen als Array, mit dem aktualisierten Namen und Beschreibung. Hoffentlich hat das alles auch für Sie funktioniert. Wenn nicht, gehen Sie zurück und überprüfen Sie den Code, es ist normalerweise etwas so einfaches wie ein Tippfehler. Wenn Sie dies jedoch in der Datenbank sehen können, Sie jetzt mit dem nächsten Video fortfahren. 17. So fügst du die Anmeldungskomponente hinzu: Der Admin-Bereich der App muss sich im Bereich befinden, den nur registrierte Benutzer zugreifen können. Wir möchten nicht, dass Besucher Pizzen aus unserem Menü hinzufügen oder entfernen oder auf die aktuellen Bestellungen zugreifen können. Daher müssen wir unserer App Nutzungsauthentifizierung hinzufügen, und wir können dies tun, indem wir die vorhandenen Firebase-Projekte verwenden. Zuerst müssen wir eine Login-Komponente hinzufügen, die wir innerhalb des Admin platzieren können, und wir werden dies mit einer neuen Komponente namens login.view tun. Gehen Sie zu den Components, erstellen Sie Login.view, wo wir beginnen können, unsere Vorlagen auf die gewohnte Weise zu konstruieren. Ich werde einen Wrapper hinzufügen. Lassen Sie uns ein div mit der Klasse von login_wrapper hinzufügen. Innen verschachtelt, können wir eine Form haben. Dieses Formular wird zwei Abschnitte haben. Wir werden uns mit der E-Mail- und Passwort-Kombination anmelden, also werden wir zunächst ein Wrapper-div für die E-Mail erstellen. Die E-Mail benötigt ein Etikett, also ist dies für die E-Mail, und dann innen können wir den Text der E-Mail-Adresse haben. Danach benötigen wir unsere Formulareingaben. Der Eingabetyp wird für E-Mail sein, die ID der E-Mail auch und dann den Platzhalterwert , der E-Mail eingeben wird. Nach diesem Abschnitt können wir dann ein zweites div noch innerhalb des Formulars hinzufügen. Dieser wird für unser Passwort sein. Das Label für Passwort, der Text des Passworts, die Eingabe wird den Typ des Passworts zusammen mit der ID und noch einmal den Platzhalter des Passworts haben . Um dieses Formular zu beenden, müssen wir nur eine Schaltfläche direkt vor dem Formular schließenden Tag hinzufügen, und dies wird der Typ der Schaltfläche, die Klasse von btn_green, und dann der Text der Anmeldung sein. Diese Komponente muss nun importiert und registriert werden , damit wir diese in der Admin-Datei verwenden können. Also gehe ich zu Admin.view, bis zu unserem Skript, wo wir unsere Login-Komponenten, den Dateipfad, importieren können. Dies ist auch in der Komponentendatei, so dass der Dateipfad einfach ist. /Anmelden. Dann registrieren Sie unsere Komponenten, und dann bis zu unseren Vorlagen, wo wir dies hinzufügen können. Ich werde dies in der Nähe des unteren Teils hinzufügen, also fügen wir direkt über dem schließenden div für unseren Wrapper unsere Login-Komponenten hinzu. Speichern Sie diese Datei und gehen Sie dann zum Admin im Browser wo wir unser neues Formular unten für die E-Mail und das Passwort sehen. Die Position dieser Komponente ist in diesem Stadium nicht wirklich wichtig, denn später im Kurs, wenn wir Zugriff auf die angemeldeten Zustände des Benutzers haben, werden wir diese Komponenten bedingt rendern, also ist dies die einzige Sache, die der Benutzer auf der Seite sieht. Im nächsten Video gehen wir zurück zu Firebase und arbeiten mit unserer Benutzerauthentifizierung. 18. So aktivierst du die Firebase-Authentifizierung: Im letzten Video haben wir ein Benutzeranmeldeformular hinzugefügt , das wir unten am Ende unseres Admins haben. Dies wird verwendet, um Daten an Firebase zu übergeben und prüfen, ob der Benutzer auf diesen Admin-Bildschirm zugreifen darf. Firebase macht die Add-In-Authentifizierung einfach zu folgen, um über die Firebase-Konsole zu gehen. Wir sehen die Authentifizierungsoption im Menü auf der linken Seite. Wir können dann eine Anmeldemethode auswählen , bei der wir die Authentifizierung mit verschiedenen Anbietern einrichten können. Wir können soziale Medien wie Facebook oder Twitter nutzen oder wir können eine E-Mail- und Passwort-Kombination verwenden, die ich anklicken und dann aktivieren werde. Sobald dies erledigt ist, klicken Sie auf Speichern. Sie sehen dann den Aktivierungsstatus direkt in der Mitte hier. Klicken Sie auf einen Benutzer und jetzt können wir einen Benutzer zu Firebase hinzufügen. Klicken Sie auf „Benutzer hinzufügen“, wo wir eine E-Mail und auch Passwort hinzufügen können . Ich werde hinzufügen, testen Sie sie auf und dann Benutzer hinzufügen. Natürlich ist ein stärkeres Passwort erforderlich, wenn dieses in der Produktion verwendet wird. Es gibt auch eine Möglichkeit, Benutzer aus der App zu registrieren und es zeigt dies in der Dokumentation, wenn Sie interessiert. Es gibt verschiedene Methoden wie das Signieren mit E-Mail und Passwort. Dies ist jedoch eher für Apps geeignet, bei denen sich öffentliche Benutzer registrieren können, als für unseren Anwendungsfall, wo wir einfach einen Administrator haben, der es am Backend anmelden kann. Jetzt haben wir einen Benutzer registriert, wir müssen unsere Authentifizierung in unserer Firebase-Konfiguration einrichten, also gehen Sie zurück zu unserem Projekt und dann zur Datei Firebase.js. Wir können dann unser Off-Modul aus Firebase importieren , genau wie wir es mit dem Fünf-Sterne-oben getan haben. Wir können Firebase Schrägstrich auth wählen, dann unten können wir einen Verweis auf unseren Firebase-Authentifizierungsdienst erstellen. Ich werde dies als Konstante exportieren, so dass es in anderen Dateien verfügbar ist. Ich werde diese Konstante durch eine Basisauthentifizierung aufrufen und dies auf Firebase setzen und auf die Authentifizierungsmethode zugreifen. Innerhalb der Auth-Dateien, genau wie wir es mit der Menüreferenz getan haben, können wir auf unsere Authentifizierungsmethoden zugreifen, indem wir Firebase auth als eine Verknüpfung verwenden. Wir können dann zu den Login-View-Komponenten gehen und jetzt können wir diese Auth Referenz aus der Konfigurationsdatei importieren. Ich werde unsere Schablonen blasen. Lassen Sie uns unsere Skripte erstellen. Dies ist ein benannter Export, also werde ich dies mit den geschweiften Klammern importieren, also war der Name Firebase-Auth und das ist aus dem Dateipfad, der Punktpunktschrägstrich und dann Firebase ist und wir werden dieses -Authentifizierungsdienst, um die Anmelde- und Abmeldefunktion zu erstellen. Lassen Sie uns mit der Anmeldung beginnen, indem Sie einen Klick-Handler zu unserer Anmelde-Button einstellbar hinzufügen. Auf nur dieser Zeile können wir hier einen Klick-Handler verwenden Punkt verhindern erstellen , um das Standardverhalten eines Browser-Aktualisieren zu verhindern , dass dies auf eine Methode namens Anmelden gleich ist und diese Methode können wir jetzt niedrig innerhalb unseres Skripts erstellen. Zunächst einmal, innerhalb unseres Exports, können wir den Namen unserer Komponente hinzufügen, die Login ist. Wir müssen auch unsere Methoden einrichten, und die einzige im Moment ist die Anmeldung. Hier können wir auf alle verfügbaren Authentifizierungsmethoden zugreifen, auf die wir mit Firebase Auth zugreifen können und das ist, was wir im nächsten Video betrachten werden. 19. An- und Abmeldung: Wir haben unsere Authentifizierung mit E-Mail und Passwort im letzten Video aktiviert. Dies bedeutet, dass wir eine Möglichkeit benötigen, die E-Mail und das Passwort zu erfassen, die der Benutzer eingibt, und wir können dies leicht mit V-Modell tun. Der erste Schritt besteht darin, E-Mail und Passwort als Dateneigenschaft hinzuzufügen. Also werden wir dies innerhalb unseres Exports tun, die Daten einrichten, und im Inneren werden wir unsere Daten als Objekt ohne Komma zurückgeben, das nach den Daten verwendet wird. Wir können die E-Mail zunächst als leere Zeichenfolge und auch das gleiche mit dem Passwort einrichten . Wir können dann V-Modell verwenden, um dies mit unseren Formulardaten zu synchronisieren. Lassen Sie uns zuerst in unsere E-Mail einloggen. Innerhalb der Formulareingabe können wir V-Modell hinzufügen und diese gleich unserer Dateneigenschaft setzen, die E-Mail sein wird. Wir machen das Gleiche. Direkt unterhalb der Passworteingabe, V-Modell und diesmal wird die Dateneigenschaft das Passwort sein. Wir können dann nach unten scrollen und die Anmeldemethode abzuschließen, die wir im letzten Video gestartet haben. Zuallererst werde ich dies als asynchrone Funktion markieren. Wir können async await verwenden. Wir können auch versuchen und fangen hinzufügen. Wir können Fehlerbehandlung hinzufügen und den Fehler übergeben, mit dem wir in nur einem Moment umgehen werden. Beginnen wir im Abschnitt versuchen, in dem wir uns anmelden und die zurückgegebenen Benutzerdaten speichern. Zunächst einmal nehmen wir unseren Verweis auf unsere Firebase-Authentifizierung. Daher können Sie auf alle verfügbaren Methoden zugreifen, die wir benötigen. Die Methode, die wir verwenden werden, ist eine Firebase-Methode namens Anmelden mit E-Mail und Passwort. Innerhalb dieser Methode geben wir einfach unsere E-Mail und unser Passwort ein. Wir haben dies auf der View-Instanz zur Verfügung. Wir können alle auf diese.email und this.password zugreifen. Wir können auch auf die Daten warten, die zurückkommen. Das ist alles, was wir für den Try Abschnitt tun müssen, gehen wir zum Fangbereich, um Fehler zu sammeln. Wir werden auf das Fehlerobjekt zugreifen und die Daten in allen Variablen speichern. Der erste wird der Fehlercode sein, der von error.code verfügbar ist. Die zweite Konstante wird für die Fehlermeldung sein, und die Fehlermeldung ist von error.message verfügbar. Danach werden wir einige Warnungen anzeigen, die für die Fehlermeldungen sein werden. Zu Beginn werde ich überprüfen, ob der Benutzer ein falsches Passwort eingegeben hat. Wir können dies tun, indem wir überprüfen, ob der Fehlercode einer Zeichenfolge entspricht , die auth/falsches Passwort ist. Wenn dies der Fall ist, können wir einen benutzerdefinierten Fehler erstellen. Lassen Sie uns also eine Warnung mit dem Bildschirm des falschen Passworts erstellen. Wenn das Passwort korrekt ist, können wir dann einen L-Abschnitt erstellen, der alle Fehlermeldungen abfangen wird, also lassen Sie uns eine zweite Warnung mit der Fehlermeldung oder mit dem Browser hinzufügen, wir können diesem nun einen Test geben. Scrollen Sie bis zum Ende des Admins, und öffnen Sie die Konsole. Wir können damit beginnen, ein falsches Passwort hinzuzufügen. Lassen Sie uns test @test hinzufügen, auf dem Passwort als Test, melden Sie sich an. Wir erhalten die Fehlermeldung, dass kein Benutzer gefunden wurde. Lassen Sie uns versuchen, die richtige, die wir in einer Firebase und ein falsches Passwort hinzugefügt haben, melden Sie sich an. Wir erhalten die Nachricht des falschen Passworts, das wir einrichten. Lassen Sie uns das richtige Passwort versuchen. Testen Sie sie also an. Jetzt haben wir die richtige E-Mail und das richtige Passwort verwendet, wir sehen keine Fehler. Später wird sich diese Login-Komponente verstecken, um den Administrator anzuzeigen, so dass der Benutzer weiß, dass es ein Erfolg war, zusammen mit der Anzeige der E-Mail des angemeldeten Benutzers und auch eine Anmeldeschaltfläche. Diese Anmeldemethode ist ein wenig einfacher und dies wird innerhalb der Admin-Komponente gehen. Lassen Sie uns der admin.view hinzufügen. Schauen Sie sich die Spitze unserer Vorlage an, wir haben bereits ein div für den Benutzerbereich erstellt , der der aktuelle Benutzer Wrapper ist. Im Inneren wird es so aussehen. Wenn wir dies öffnen, erstellen Sie die Spanne, die wird der Text der eingeloggt als sein, gefolgt von Doppelpunkt. Unten befindet sich eine Schaltfläche mit dem Text der Abmeldung. Dies benötigt auch einige Attribute innerhalb des öffnenden Tags. Dies ist eine Art von Taste, eine Klasse, BTN rot. Wir können einen Klick-Handler hinzufügen, wo wir das Standardverhalten verhindern werden. Die Methode, die wir im Begriff sind zu erstellen, wird sein, sich abzumelden. Jetzt müssen wir auf eine neue Firebase-Methode/scrollen Sie nach unten zu unserem Skript, wo wir importieren können und wir werden Modul oder Impuls innerhalb der geschweiften Klammern, da dies ein benannter Export war. Wir können Firebase aus importieren und dieser Dateipfad ist diesmal../und dann Firebase. Nach unseren Komponenten können wir dann unsere Methode erstellen. Also richten Sie unsere Methoden ein, und dann im Inneren können wir eine asynchrone Funktion namens Abmelden erstellen. Richten Sie einen Versuch und einen Catch-Abschnitt ein. Übergeben des Fehlers. Die Anmeldung bei Firebase ist ziemlich unkompliziert. Alles, was wir tun werden, ist zu warten, Firebase aus. Die Methode, auf die wir zugreifen müssen, ist abmelden. Das ist alles, was wir innerhalb des Try-Abschnitts tun müssen. Wir können dann alle Fehler abfangen, indem wir eine Nachricht an den Benutzer warnen. Ich werde dies innerhalb der [unhörbaren] hinzufügen, damit Sie eine Variable einfügen können. Fehler, Abmeldung gefolgt von einem Komma, und fügen Sie unsere Variable of error. Lassen Sie uns dies im Browser ausprobieren. Lassen Sie uns die Konsole neu laden und löschen. Versuchen wir alle unsere Fehlermeldungen. Zunächst einmal eine falsche E-Mail und Passwort. Wir erhalten die Nachricht des Benutzers möglicherweise gelöscht worden. Wir können die richtige E-Mail und falsches Passwort hinzufügen, und wir erhalten die falsche Nachricht. Lassen Sie uns das richtige Passwort versuchen, melden Sie sich an, wir erhalten keine Fehlermeldungen. Scrollen Sie nach oben. Jetzt sind wir eingeloggt, klicken Sie auf Abmelden. Es werden keine Fehlermeldungen angezeigt. Das scheint also gut zu funktionieren. Später im Kurs werden wir dem Benutzer ein Feedback hinzufügen, eine neue E-Mail-Adresse anzeigen, wenn eingeloggt, aber jetzt scheint das alles gut zu funktionieren. 20. Abschließende Komponenten: Wir machen bisher gute Fortschritte mit dieser Anwendung. Bevor wir mit dem nächsten Abschnitt fortfahren , der Routing aussehen wird, möchte ich nur zuerst die restlichen Komponenten hinzufügen, die für dieses Projekt benötigt werden. Sie werden ziemlich einfache Komponenten wie eine „Über uns“ und „Kontaktieren Sie uns“ -Seite sein. Aber sie werden im nächsten Abschnitt nützlich sein wo wir sehen, wie wir Routing verwenden können, um zwischen ihnen zu wechseln. Eine der letzten Komponenten, die wir brauchen, ist die About Us-Komponenten, also lassen Sie uns die Seitenleiste öffnen und eine neue Datei namens about.view erstellen. Das wird ziemlich einfach sein, wo wir eine Vorlage erstellen , aber jetzt werde ich ein leeres div hinzufügen. Erstellen Sie auch unseren Skript-Abschnitt und den Komponentennamen, der über das Speichern dieser sein wird, und zurück in die Komponenten können wir unsere zweite Datei erstellen, die contact.view für die Kontakt-Us-Seite sein wird. Erstellen Sie unsere Vorlage hier, so dass dies ein div mit der Klasse von contact_ wrapper haben wird, eine Ebene für Überschrift mit dem Titel Kontakt. Danach fügen wir unsere Adresse für den Kontaktbereich hinzu. An der Spitze werden wir den Namen von Pizza Planet innerhalb der starken Tags hinzufügen. Dann können wir eine fiktive Adresse bilden, getrennt durch Break-Tags, fügen Sie diese in neue Zeilen. Lassen Sie uns einfach etwas aus Adresse 1 zusammenstellen, kopieren und einfügen Sie dies in ein paar mehr Male, und auch eine Telefonnummer und machen Sie dies auch. Es gibt immer einen zweiten Satz von Adresse-Tags und es wird nur für unsere E-Mail sein. Innerhalb dieser starken Tags lassen Sie uns den Titel der E-Mail hinzufügen, gefolgt von einem break-Tag und dann eine E-Mail-Adresse innerhalb der P-Elemente. Jetzt können wir jede E-Mail-Adresse hier hinzufügen, so kontaktieren Sie auf pizzaplanets.com. Ein Skript-Tag, knapp unter diesem und nur Skript-Tag benötigt, ist ein Name der Komponenten, die Kontakt ist und dann können wir unsere Stile direkt unten hinzufügen. Ich werde nur einige grundlegende Stile für unseren Kontakt-Wrapper hinzufügen, die als unser umgebendes div hinzugefügt wurden. Dies ist eine Klasse, also die Hintergründe, die ich einen Hex-Wert von f1e6da hinzufügen möchte, eine Höhe zu den Komponenten von 100 Prozent der Ansichtsfensterhöhe, werde ich nach einem gewissen Rand und Padding anwenden, also 10 Pixel und auch das gleiche für unsere Polsterung. Die nächste Komponente wird für die Delivery Info sein, also ist dies Delivery.view. Beginnt wie gewohnt mit der Vorlage, einem umgebenden div, das die Klasse von info_block haben wird. Ein Titel von Delivery Info und ich werde die Tilden auf beiden Seiten hinzufügen. Ein zweites div danach mit der Klasse des Infoblock-Inhalts. Nur damit wir dies innerhalb des CSS anvisieren können. Wir können einige Beispieltext innerhalb des P-Elements hinzufügen, so dass ich lorem eingeben werde, drücken Sie Tab, um einige Beispieldaten zu erhalten. Danach können wir ein Bild hinzufügen. Für die Bildquelle können wir dies aus unserem Bilderordner holen. Dies ist innerhalb von Assets/Bildern, und dann der Name von delivery.png, die Alt-Texte des Lieferbildes. Dann müssen wir nach Tagen nur unser Skript hinzufügen, das den Namen unserer Komponenten haben wird, die Lieferung sein wird. Die nächsten beiden Komponenten der Geschichte und Bestellanleitung werden ziemlich ähnlich sein. Ich werde den gesamten Inhalt aus dieser Datei kopieren, eine Neue Datei erstellen und dies wird History.View, Einfügen in den Inhalt sein. Alles, was wir hier tun müssen, ist, den Titel der Geschichte zu ändern, das Bild ist planets.png, der alt-Text des Planetenbildes. Dann ist der Komponentenname der Geschichte, speichern Sie diese und die allerletzte, die wir erstellen müssen, für die Bestellanleitung, basierend auf den gleichen Daten, und wir können dies nutzen. Der Text, wie man die Bildquelle anstelle der Lieferung bestellt, wird order.png sein, der Alt-Text des gesamten Bildes und dann schließlich der Titel der Bestellanleitung. Dies ist es jetzt für unsere Komponenten und der größte Teil des Projekts ist jetzt eingerichtet. Wir müssen keine dieser Komponenten registrieren da wir sie mit Routing im nächsten Abschnitt anzeigen werden. 21. Routerinstallation und -einrichtung: Willkommen zurück zu diesem brandneuen Abschnitt. Hier tauchen wir in den Vue Router ein. Der Vue Router ermöglicht es uns, Routen zu erstellen, um zu verschiedenen Teilen unserer Anwendung zu navigieren. Im Moment fügen wir ohne den Router einfach eine Komponente hinzu, an der wir gerade arbeiten, in die Datei app.js ein. Wir können auf dem Bildschirm sehen, ein Router ermöglicht es uns, zwischen Komponenten für verschiedene URLs oder Seiten zu wechseln. Diese App wird als eine einzelne Seite Anwendung erstellt. Dies ist durchaus üblich für JavaScript-Projekte. Wir verwenden webpack, um alle unsere Komponenten und Abhängigkeiten in einer Hauptpaketdatei zu bündeln. Das bedeutet, wenn wir unsere Anwendung zum ersten Mal besuchen, werden wir dieses Paket vom Server anfordern. Der Server gibt in der Regel nur die Indexseite in allen Fällen zurück, und JavaScript behandelt dann das Wechseln zwischen den Seiten. Alle unsere Komponenten innerhalb des Browsers ohne Zeit, um eine weitere Anfrage an den Server zu stellen. Daher der Name Single-Page-Anwendungen. Dies führt dazu, dass unsere App wirklich schnell arbeitet, da dieses JavaScript viel schneller ist als ein Roundtrip zum Server, um eine Seite zu holen, wenn wir es brauchen. Um mit dem Vue Router zu beginnen, müssen wir ihn zuerst installieren. Wir können dies tun, indem Sie den CDN-Link verwenden , der auf der Website router.vuejs.org verfügbar ist. Wenn Sie auf die Installation gehen, können Sie den CDN-Link von hier aus greifen, oder wir können das Modul mit npm installieren, können Sie den CDN-Link von hier aus greifen, oder wir können das Modul mit npm installieren, und das ist, was wir jetzt tun werden. Sie in den Projekten in Visual Studio Code GehenSie in den Projekten in Visual Studio Coderunter zum Terminal. Ich werde dies mit npm i und dem Paketnamen von Vue Router installieren . Sobald dies die Installation abgeschlossen ist, können wir auf die main.js gehen und damit beginnen, dies einzurichten. Die Datei hilft beim Erstellen und Importieren. es zieht unser Knotenmodul. Also müssen wir den Vue Router importieren. und der Paketname war vue-router. Da wir Module oder separate Dateien verwenden, die webpack bündelt, können wir erklären, dass wir diesen Router in allen unseren Dateien verwenden möchten, indem wir view.use hinzufügen. Innerhalb der view.use passieren wir dann unseren View-Router. Dies ist in allen Dateien verfügbar, was bedeutet, dass wir die Importanweisung nicht oben in jeder Datei hinzufügen müssen. Wir müssen dann die neue Vue Router-Instanz einrichten, die ein Objekt aufnehmen wird. darunter können wir unsere Konstanten namens Router einrichten. Dies ist eine neue Instanz von Vue Router. Persönliche Gegenstände. Wir werden zu diesem Objekt für all diesen Abschnitt hinzufügen, beginnend im nächsten Video, wo wir tatsächlich unsere Routen einrichten. Dann können wir unseren Router in die View-Instanz injizieren, indem wir diesen konstanten Namen des Routers hinzufügen. Innerhalb der neuen View-Instanz, vorbei an unserem Router. Mit diesem jetzt an Ort ist unser Router eingerichtet und bereit, einige Routen hinzuzufügen, um zwischen Komponenten zu wechseln. Das ist es, was wir im nächsten Video bekommen. 22. So erstellst du die Routen: Wir haben jetzt unseren Router installiert. Es ist Zeit, einige Routen hinzuzufügen, damit wir zwischen Seiten oder Komponenten wechseln können, indem wir die Datei main.js aufrufen, wir unsere Route zur Instanz im letzten Video hinzugefügt haben. Wir können entweder unsere Routen direkt im Inneren hinzufügen, oder um die Dinge schön und ordentlich zu halten. Ich werde eine neue Konstante namens Routen einrichten und ein neues Array direkt über Routern und Array erstellen, das wir ein Objekt hinzufügen können, Routen essen. Innerhalb dieses Objekts müssen wir einen Pfad definieren. Beginnen wir mit der Erstellung unserer Objekte. Wir können in der Pfadeigenschaft passieren. Dann fügen wir den Pfad hinzu, zu dem Sie navigieren möchten. Die Route „Home“ ist der Schrägstrich. Oder zum Beispiel, wenn wir vorwärts Schrägstrich Menü hinzufügen, wird dies unsere URLs, die als pizzaplanet.com/menu sind. Lassen Sie uns mit den Heimrouten beginnen. Dann müssen wir erklären, welche Komponenten wir rendern möchten , wenn der Benutzer die Schrägstrich Route besucht. Ich werde zu den Home-Komponenten navigieren. Wir müssen diese Komponente auch innerhalb eines Augenblicks importieren. Die zweiten Routen, die ich hinzufügen werde, sind für das Menü. Wieder, wie ich String-Schrägstrich Menü, das auf eine Komponente zuordnen wird, mit dem Namen meiner neuen. Dann oben in dieser Datei wie immer, können wir unsere Module importieren, alle unsere Komponenten. Importieren, die Home-Komponente. Dies ist aus unserem Komponenten-Verzeichnis, das ist. /components/home. Dieser andere Befehl wird unser Menü sein, die gleichen Dateipfad-Komponenten/Menü. Jetzt haben wir unsere beiden Routen eingerichtet, wenn X benötigt, übergeben Sie sie an unsere Router-Inzidenz. Scrollen Sie nach unten, es ist während Routen eine Konstante, alles, was wir tun müssen, ist einfach vorbei an unseren Routen von oben und stellen Sie sicher, dies ist Routen, um uns zu ermöglichen, zwischen diesen Routen zu wechseln, wir müssen die Header-Navigationslinks ändern. Lassen Sie uns zum Header W. Wir müssen eine Router-Link-Komponente verwenden, navigieren Sie zwischen diesen Routen. Um zu beginnen, werde ich den vorhandenen Link auskommentieren. Lassen Sie uns den Link kommentieren, das Home-Menü, auch Kontakte und auch über uns, jeden Ort können wir einen Router-Link hinzufügen. Router-Link sieht einfach wie alle anderen HTML-Elemente aus. Ein Router-Bindestrich, dieser hat eine öffnende und auch ein schließendes Tag. Wir müssen das abschließen. Innerhalb des öffnenden Tag, können wir dann zu Eigenschaft hinzufügen und fügen Sie dann einen Schrägstrich. Diese Zu Eigenschaften, die wir gerade hinzugefügt haben, ist der Pfad, zu dem Sie verlinken möchten und es ist viel ist eine der Routen, die wir gerade in der main.js eingerichtet haben, die entsprechenden Komponenten werden gerendert. Innerhalb unseres Router-Link können wir wieder unseren Link mit den a-Elementen, dem Linknamen von zu Hause,übergeben dem Linknamen von zu Hause, und dann unseren Link abschließen, wobei darauf geachtet wird, die href-Eigenschaft hier nicht hinzuzufügen, da wir den View-Router verwenden, um mit all dem umgehen. Ich werde unseren Router-Link kopieren, scrollen Sie nach unten zu unserem Menü. Sie können dann den Router-Link ändern, um den Menüpfad des Schrägstrichs zu sein. Der Titel des Menüs gehen nach unten zu Auftragnehmer. Der Pfad ist Schrägstrich Kontakte und dann letztendlich das gleiche für etwa. Nun weiß der View-Router genau, welche Komponenten wir für jede Route rendern möchten. Aber wir müssen dem View-Router auch genau mitteilen, wo sie in unseren Projekten in der app.view-Datei angezeigt werden sollen . Der letzte Schritt besteht darin, die Router-View-Komponenten hinzuzufügen. Im Moment haben wir den Admin und das Haus zur gleichen Zeit an Ort und Stelle angezeigt, können wir die Router-Ansicht hinzufügen. Dies hat eine öffnende und auch ein schließendes Tag und dies wird die Position sein, an der die gerenderte Komponente angezeigt wird. Dies fungiert im Grunde als Steckdose für die Komponente, die aus dem Menü ausgewählt wird. Das bedeutet, dass wir jetzt alle Komponenten aus unserem Skript unten entfernen können, noch den App-Header benötigen, damit wir diese in lassen können oder wir könnten das Admin-Menü und Home entfernen. Wir brauchen diese nicht mehr. Wir können auch unsere Komponenten bereinigen nur den App-Header verlassen. Mit all dem jetzt vorhanden, können wir unseren Entwicklungsserver mit npm run serve starten. Gehen Sie zum Browser und wir können dies in unserem Topf öffnen, der localhost 8080 ist. Wir haben unsere Home-Komponente. Lassen Sie uns darauf klicken. Wir können dann zu unserem Menü-Link gehen und wir sagen, dass dies direkt unten gerendert wird. Zurück nach Hause. Denken Sie daran, in der main.js, wir richten nur die Startseite auf den Menürouten. Wenn wir auf den Kontakt und über uns klicken, haben wir noch keine Inhalte. Es ist jetzt an Ort und Stelle. Gehen wir nun zum nächsten Video über, wo wir uns die Router-Link-Komponenten genauer ansehen werden. 23. Mehr Details zum Router-Link: Im letzten Video haben wir den Router-Link erfolgreich hinzugefügt. Die Verbindung zwischen den Pfaden innerhalb unserer Anwendung. Wenn wir zum Browser gehen und dann mit der rechten Maustaste klicken und inspizieren, können wir die Entwickler-Tools öffnen und einen genaueren Blick auf die Ausgabe des Codes werfen. Wenn wir nach unserem Header-Abschnitt suchen, öffnen Sie dies nach oben und dann nach unten in unsere nav Link, wir sehen, wir haben unsere ungeordnete Liste. Innerhalb unserer ungeordneten Liste haben wir unsere Listenelemente, in denen wir unseren Link hier gerendert haben. Wenn wir nun den Link öffnen, sehen wir eine Sekunde ein Element, das innen verschachtelt ist. Wir wissen, wenn wir zum Header gehen, der View-Datei, dass wir einen einzigen Link haben sollten, weil wir dies im letzten Video hinzugefügt haben. Warum haben wir stattdessen zwei Links gesehen? Nun, das liegt daran, dass die Router-Link-Komponente standardmäßig ein Tag rendert. Wir können dies ändern, indem wir eine nie Requisite namens Tag hinzufügen, die es uns ermöglicht, den Router-Link so einzurichten, dass es sich um eine andere Art von Element handelt. Ich gehe rüber in die Kopfzeile. Innerhalb unseres Router-Link, kurz nach den beiden Requisiten, können wir eine zweite Sonde namens Tag hinzufügen und dies als Listenelement festlegen. Dies bedeutet auch, dass wir jetzt die umgebenden li-Tags entfernen können, da wir diese nicht benötigen. Entfernen Sie dies und auch die darunter. Wir können auch die Kommentare entfernen. Das ist auf unseren Boutons. Wir können das Gleiche direkt oben machen. Wir können das letzte Element entfernen, ein Tag einrichten, um wieder ein Listenelement zu sein und das gleiche für die ersten beiden tun. Das Menü entfernen Sie den Listeneintrag, Tag von li und schließlich das gleiche für die Home-Komponenten. Geben Sie diesem ein Speichern und zurück zu den Entwickler-Tools. Wenn wir diesem einen Refresh geben, können wir nun wieder in unseren Header gehen, in die Navigation, die ungeordnete Liste und einen unserer Listenelemente öffnen. Im Inneren sehen wir ein einzelner Link gerendert wird und wir haben immer noch die umgebende Listenelement. Link sieht mehr so aus, wie es sein sollte. Außerdem werden Sie sehen, dass dem umgebenden Listenelement einige Klassen hinzugefügt werden. Es gibt Router Link, exakt aktiv, Router Link aktiv zwei. Router Link exakt bedeutet, dass der Pfad genau übereinstimmen muss. Als Beispiel haben wir bei der Verwendung der Home-Route den Schrägstrich von selbst. In einer anderen Route, wie zum Beispiel Schrägstrich mein neues, beginnt dies auch mit einem Schrägstrich zwei. Ohne diese genaue Klasse wären die Standardwerte üppig für alle Routen viel. In der genauen Klasse bedeutet, dass der gesamte Pfad eine genaue Übereinstimmung sein muss , anstatt nur auf den Schrägstrich am Anfang zu schauen. Die zweite hinzugefügte Klasse ist Routerlink aktiv. View Router fügt diese Klasse automatisch zum aktuellen aktiven Link hinzu. Wir können dies in Aktion sehen, wenn wir auf die obigen Links klicken. Wenn wir zu „Kontaktieren Sie uns“ gehen, sehen wir, dass dies jetzt entfernt wird. Routerverbindung aktiv wird nun auf neuen Kontaktlink platziert. Wir können auch diese Klasse nutzen, um einige benutzerdefinierte CSS hinzuzufügen. Sie fragen sich vielleicht auch, warum Sie den Routerlink überhaupt verwenden. Immerhin hatten wir bereits ein Tag, wo wir auch einfach einen Link hinzufügen konnten. Nun, es gibt ein paar Gründe, warum die Verwendung von Routerlink ein besserer Ansatz ist. Bei einseitigen Anwendungen ist die Idee, dass Sie für jede Homepage eine Anfrage an den Server stellen. Jede Seite danach wird dann vom Router innerhalb des Browsers umgeschaltet , so dass wir nicht ständig Anfragen an den Server stellen müssen. Verwendung von Routerlink fängt das Click-Ereignis ab, sodass der Browser nicht versuchen wird, jede Seite neu zu laden. Stattdessen schaltet es einfach zwischen den Komponenten um. Dies ist einer der Gründe, warum wir nicht unser Hass Attribut einen Link, weil dies eine neue Anfrage an den Server stellen wird. Auch bald werden wir uns verschiedene Modi ansehen, Geschichte und hart genannt werden, und wir werden diese bald übergehen. Put Router Link ermöglicht es uns auch, zwischen diesen Modi zu wechseln, ohne zusätzliche Änderungen vorzunehmen. Dies sind nur einige zusätzliche Details, um die Routerverbindung genau so zu machen, wie wir es wollten. 24. Bindung und dynamische Routen: Manchmal müssen wir beim Erstellen von Routen berücksichtigen, dass sich auch die Pfade zu bestimmten Seiten ändern können. Zum Beispiel, innerhalb unserer URL, könnten wir zu den Home-Routen gehen und dann Schrägstrich Benutzer und dann Schrägstrich einige Benutzernamen. Dieser Benutzernamenbereich wird natürlich für jeden Benutzer unterschiedlich sein. So können wir die gleichen Komponenten für jeden angemeldeten Benutzer verwenden oder das Menü können wir einige verschiedene Abschnitte haben. Wir können vorwärts Schrägstrich Menü haben und dann zum Beispiel können wir Getränke haben, oder wir können Essen haben. Möglicherweise möchten wir die gleichen Menükomponenten anzeigen, aber springen Sie einfach zu verschiedenen Abschnitten unseres Menüs. Dies wird jedoch schwierig sein, da die Pfade für den Router, wie wir bereits gelernt haben, genau übereinstimmen muss. Für diesen Anwendungsfall können wir dynamische Routenübereinstimmung in verwenden, was dem View-Router mitteilt, welche Teile der URL sich ändern können, und wir können dies in den Routen über im Hauptpunkt js tun. Lassen Sie uns zu dieser Datei gehen und wir können das dynamische Segment einrichten , indem Sie einen Doppelpunkt hinzufügen, gefolgt von dem Namen unserer Wahl. Innerhalb des Menüs können wir einen Schrägstrich hinzufügen und dann den Doppelpunkt verwenden, um zu erklären, dass dieser Abschnitt ein dynamischer Teil der URL sein wird. Durch das Hinzufügen dieser, werden die Menükomponenten jedes Mal angezeigt, wenn die URL endet mit Schrägstrich Menü und dann Schrägstrich jeden Namen im Inneren hier. Das dynamische Segment kann auch ein beliebiger Teil der URL sein, je nach Bedarf. Zum Beispiel könnten wir einen dynamischen Abschnitt und dann einen Schrägstrich und dann einen hartcodierten Abschnitt haben. Dies ist nützlich für Dinge wie Admin-Abschnitte, in denen wir einen Schrägstrich, eine Benutzer-ID und dann zum Beispiel Schrägstrich Bestellungen haben können. Eine andere Sache zu beachten, dass dieser Name, den wir den dynamischen Abschnitt gegeben haben, auch als Variable fungiert. Wir können auf die Daten innerhalb unserer Komponenten zugreifen, indem wir diesen Variablennamen verwenden. Also, wenn wir gehen über die Menü-Komponenten, Menü Punkt-Ansicht, und dann scrollen Sie bis zum Anfang unserer Vorlagen direkt über unserem Menü-Abschnitt hier. Innerhalb der doppelten geschweiften Klammern können wir $ symbol route verwenden, um auf alle unsere Routeninformationen zuzugreifen. Wir wollen auf die Parameter von Punktparams und dann den Variablennamen von Elementen zugreifen. Geben Sie dieser Datei ein Speichern und über an den Browser innerhalb der URL. Wir können dann auf unseren Link zugreifen. Also lassen Sie uns für Schrägstrich Menü gehen und dann unsere dynamische Abschnitt, die jedes Wort sein kann, das wir wählen, Ich werde Getränke hinzufügen drücken Enter. Wir sehen jetzt unsere Menükomponenten wurde gerendert und dies wird auch die URL-Parameter herausgezogen und ich werde dies auf den Bildschirm stellen. Dies ist einige Funktionen, die wir in unserer Anwendung nicht benötigen, also werde ich dies entfernen und das Menü wieder zum Schrägstrich zurücksetzen. Aber das ist etwas wirklich Nützliches zu wissen, wenn Sie den View-Router verwenden. Auch im Menü können Sie dies ändern, um Schrägstrich Menü zu sein. Während Sie auch Dynamikabschnitte unterziehen möchten, können die tatsächlichen Pfade in der Router-Link-Komponente auch dynamisch sein. Zum Beispiel, wenn wir über die Kopfpunktansicht innerhalb unseres Router-Link gehen, die beiden Eingabeaufforderungen, die wir hatten einen hart codierten Wert von Schrägstrich Menü, Kontakt und über. Wir können diese auch dynamisch machen, indem wir sie zu unserer View-Instanz hinzufügen. So können wir unter dem Namen eine Dateneigenschaft hinzufügen. Wir werden auch ein Objekt zurückgeben. Hier drinnen werde ich vier Datenwerte hinzufügen. Der erste wird der Home-Link sein. Richten Sie dies als unseren Schrägstrich String ein, den Menülink zwei, das ist Schrägstrich Menü, die Kontaktverbindung von Schrägstrich Kontakt und dann schließlich die über Link am unteren Rand des Schrägstrich über. Wir können dann diese Datennamen oben in der Routerverbindung verwenden, wobei ein Doppelpunkt vorangestellt ist, um anzuzeigen, dass dies dynamisch ist. Anstatt dieser hartcodierte Zeichenfolgenwert, können wir dem Doppelpunkt kurz vor hinzufügen und wir können dies als Home-Link einrichten. Gleiche für die Speisekarte. Dies wird Menü-Link sein. Wir können den Doppelpunkt hinzufügen, und wir werden das gleiche tun und direkt unten für unsere letzten beiden Links, fügen Sie den Doppelpunkt. Dies ist der Kontaktlink und der Abschnitt über, dies ist der Link über. Sag das, und geh zum Browser und lass uns nach Hause gehen. Sie sehen den Schrägstrich am Ende, das Menü Schrägstrich Kontakt und schließlich über. Dies ist vielleicht etwas, das Sie nicht viel verwenden müssen. Es ist jedoch schön zu wissen, dass dies verfügbar ist, wenn wir einen Anwendungsfall dafür haben, z. B. wenn wir dynamisch eine URL erstellen und beliebige Variablen darin einfügen müssen. Wir können diese dann zu unserer Dateneigenschaft hinzufügen und dann die URL entsprechend aktualisieren. Das ist es jetzt für dynamisches Routing. Im nächsten Video werden wir einen Blick auf genau werfen, was dieser Hash innerhalb der URL ist , indem wir einen Blick auf die Historie in Hash-Modi werfen, die der Router bereitstellt. 25. History-Modus und Hash-Modus: Sie haben vielleicht bereits bemerkt, dass seit wir begonnen haben, den View-Router zu verwenden , am Ende der URL ein Hash hinzugefügt wurde. Dies liegt daran, dass der Router standardmäßig auf den Hash-Modus eingestellt ist und der Grund, warum dieser Hash hinzugefügt wird , besteht darin, ein Neuladen der Seite zu vermeiden, wenn sich eine Route ändert. Ich habe bereits erwähnt, dass wir bei der Verwendung von Single-Page-Anwendungen die Anfrage nur für die Haupt-Indexseite an den Server senden möchten. Dann übernehmen die Routen von dort aus und wechseln zwischen Komponenten, ohne Serveranforderungen zu senden. Dieser Modus ist nützlich für unsere Single-Seiten-Anwendungen, aber im Allgemeinen möchten wir keinen Hash innerhalb der URL haben, da er ohne einen viel schöner aussehen würde. Um den Hash zu entfernen, können wir den Hash-Modus in den Verlaufsmodus ändern und wir können dies in der Datei main.js tun. Lassen Sie uns dorthin gehen und wir können den Historienmodus zu unseren Router-Objekten hinzufügen. Direkt unter unserem Router-Objekt, wo wir unsere Routen hinzugefügt haben, können wir die Modus-Einstellung hinzufügen und sie in eine Zeichenfolge namens History ändern. Verlaufsmodus nutzt die HTML5-Verlaufs-API, die es uns ermöglicht, eine bestimmte URL zu ändern, ohne dass Sie aktualisieren müssen. Wir mussten den Hash-Modus vorher nicht zu unserer View-Router-Instanz hinzufügen , da dies standardmäßig ist. Nun, wenn wir diese Datei speichern und zu unserer Anwendung gehen, klicken Sie auf den Home-Link. Wir sehen jetzt, dass der Hash entfernt wurde und das gleiche, wenn wir auf unsere Über-Links klicken zu. Dies sieht jetzt besser aus, schafft aber auch ein kleines Problem, das wir umgehen müssen. Wir müssen auch unseren Server für dieses neue Setup konfigurieren. Unser Server muss den Index oder HTML in allen Fällen zurückgeben, einschließlich aller 404-Fehler. Sobald diese zurückgegeben wurde, übernimmt der Router das Umschalten zwischen Komponenten am Frontend und übernimmt. Wenn Sie dies auf einer echten Produktions-App tun, finden Sie einige Serverkonfigurationsbeispiele in der vue Router Dokumentation. Wenn Sie zur Vue Router-Dokumentation und innerhalb unserer HTML5-Historienmodus-Option gehen. Hier, wenn wir nach unten scrollen, könnten wir einige Beispiel-Server-Konfigurationen finden , wo wir diese Beispiele für verschiedene Arten von Servern sehen können , und dies ist etwas, auf das wir später zurückkommen werden , wenn wir mit Hosting zu tun haben, aber für jetzt Hier finden Sie einige Beispiele für Konfigurationen, wenn Sie einen anderen Server verwenden. Das letzte, was Sie jetzt kümmern müssen, ist die Seite index.html, die immer vom Server zurückgegeben wird, so dass wir keine 404-Fehler vom Server gemeldet bekommen , wenn eine URL nicht gefunden wird. Wenn wir zu unserem Projekt gehen und eine nicht erkannte URL eingeben, werden keine Komponenten auf dem Bildschirm angezeigt , da wir keine Routen eingerichtet haben, die übereinstimmen, daher brauchen wir eine Möglichkeit, diesen Fall zu behandeln und wir werden einen Blick bei diesem im nächsten Video. 26. So findest du alle Routen und kannst sie umleiten: Wir beendeten im letzten Video mit der Erwähnung, dass wir, da wir unseren Router-Modus geändert haben, eine Möglichkeit benötigen, alle Folgen für Fehler zu behandeln, wenn eine URL nicht gefunden wird. Dies ist eine ziemlich einfache Lösung. Alles, was wir tun müssen, ist eine Catch-all-Route zu diesen Fällen hinzuzufügen und wir können dies zurück in der Hauptpunkt-JS-Datei tun. Wir können eine neue Route erstellen, die es in unserem Routenarray behandeln wird. Kurz nach dem Menü können wir ein neues Objekt hinzufügen, wo der Pfad gleich einem Stern sein wird. Der Stern als URL-Pfad deckt uns für alle Pfade ab, die oben nicht übereinstimmen. Genau wie unsere anderen Routen können wir eine Komponente hinzufügen, die angezeigt wird, wenn der Pfad nicht übereinstimmt. Zum Beispiel könnten wir hier eine Komponente wie die folgende vierseitige hinzufügen. Alternativ können wir auch eine Weiterleitung hinzufügen, die auf jede Seite umgeleitet wird, die wir wählen, wie zum Beispiel die Home-Route. Wenn wir dies sagen und uns im Browser loslegen, können wir eine unbekannte URL hinzufügen. Es ist betreten, und wir umgeleitet auf die Heimroute. Dies sind einige Optionen, um uns für nicht erkannte URLs zu decken. Wir können entweder auf eine andere Seite umleiten oder eine benutzerdefinierte Komponenten mit einigen Anweisungen für den Benutzer einrichten . Diese Weiterleitung kann auch auf allen anderen Strecken verwendet werden, sie ist nicht nur für die Catch-all-Route reserviert. Im nächsten Video werden wir uns mit dem Thema Routing befassen und sehen, wie wir verschachtelte Routen zu unserer Anwendung hinzufügen können. 27. Verschachtelte Routen: Die Routen, die wir bisher benutzt haben, waren ziemlich einfach. Wir haben alle unsere Menüpunkte. Sie stehen hier auf der gleichen Ebene, ohne untergeordnete Gegenstände. Der Router macht es uns einfach, verschachtelte Routen hinzuzufügen, um Routen zu gruppieren, welche Menge zusammenhängt. Wir richten Komponenten im letzten Abschnitt ein. Nur die Kontakt- und Bestellanleitung, die Sie hier im Inneren sehen können. Diese Idee für uns, als untergeordnete oder verschachtelte Komponenten des über uns Link zurück innerhalb dieser main.js Datei zu gruppieren . Wir können dies wie jede andere Route starten, indem unser Objekt zu unserem Routenarray hinzufügen, wir können einen Pfad hinzufügen. Dieses Mal haben wir es mit dem über Link zu tun, also ist dies Schrägstrich über. Gleich danach wollen wir auch eine Komponente rendern. Die Hauptkomponenten, wenn darauf geklickt wird, sind etwa. Um dann verschachtelte untergeordnete Routen hinzuzufügen, müssen wir sie nur durch ein Komma trennen. Wir können die kinder-Eigenschaft hinzufügen und diese dann als Array einrichten. Hier drinnen werden wir einige Optionen hinzufügen, so ähnlich wie bei unseren Top-Level-Routen. Wir werden ein Objekt einrichten, in dem wir einen Pfad einrichten. Der erste Pfad ist für den Schrägstrich Geschichte. Genau wie oben. Wir rendern dann eine Komponente aus. Ich werde der Komponente einen Namen der Geschichte geben, die in nur einem Moment importiert wird. Getrennt durch ein Komma, werde ich das noch zwei Mal kopieren und duplizieren. Die zweite wird für die Lieferung sein , und die Komponente wird auch Lieferung sein. Gleich am Ende werden wir dies durch die Bestellanleitung und auch den Pfad ersetzen , der Bindestriche führt. Eine der Dinge, auf die man beim Verschachteln von Kanalrouten achten muss, ist der Pfad zur Route. Beim Schreiben einer untergeordneten Routen innerhalb dieses Arrays ist auch die Art und Weise, wie wir den Pfad schreiben, wichtig. Wenn wir am Anfang einen Schrägstrich hinzufügen, wird der Pfad als Wurzelpfad behandelt. Ich werde ein Beispiel direkt unten hinzufügen, so dass Schrägstrich Geschichte würde uns mit unserer URL wie Pizza planets.com, Schrägstrich Geschichte verlassen . Alternativ, wenn wir nicht den Schrägstrich vor der Geschichte hatten, hätten wir einfach in die Geschichte innerhalb unseres Pfades tippen können. Dies wird Pizza planets.com sein. Dies würde den Pfad des Elternteils des Schrägstrichs um berücksichtigen, dann gefolgt von der Geschichte kurz danach. Dies sind zwei verschiedene Ansätze, die alle vom Schrägstrich innerhalb des Pfades abhängig sind, je nachdem, wie Sie die URLs erstellen möchten. Ich werde nur diese beiden Beispiele hier entfernen. Dann sind auch ein Komma, um dies über Link zu trennen. Wir können auch unseren Kontakt Link zwei hinzufügen, aber dieser ist auf der Root-Ebene zusammen mit unserem Menü auf zu Hause. Ich werde dies als unseren dritten Artikel hinzufügen. Ein Pfad ist Schrägstrich Kontakt und die Komponenten sind für Kontakte. Kamera am Ende. Dann auch unser Admin zwei. Dies wird nicht durch einen Menü-Link gesteuert, aber wir können immer noch darauf zugreifen, indem wir den Schrägstrich Admin innerhalb unserer URL verwenden. Dann sind die Komponenten von admin und ein Komma am Ende. Wir müssen dann unsere Komponenten importieren, die Sie verwenden möchten, die die untergeordneten Komponenten und Admin und Kontakt sind. Lassen Sie uns das noch ein paar Mal duplizieren. Das Menü, das sich in admin ändert. Wir müssen auch die About Seite importieren, wir brauchen auch Kontakt. Wir brauchen auch Geschichte, Lieferung und Bestellanleitung. Lieferung und schließlich am Ende brauchen wir die Bestellanleitung. Sobald dies erledigt ist, geben Sie dieser Datei ein Speichern und gehen Sie zum Browser. Schauen wir uns unsere Heimwege an. Wir haben unsere Speisekarte noch funktioniert, die Kontakt-uns. Wir können unseren Schrägstrich Admin testen. Das funktioniert auch. Dann haben wir endlich den Über uns Link, der eine untergeordnete Komponente hat. Wenn wir darauf klicken, ist keine der untergeordneten Komponenten sichtbar. Dies liegt daran, dass die Router-View-Komponente, die wir haben, wenn Sie die app.view öffnen. Dies ist die Router-View-Komponente, die wir derzeit haben. Dadurch wird die Komponente auf den Bildschirm gerendert. Aber es macht nur die Routen der obersten Ebene. Um eine Komponente der HL-Route anzuzeigen, müssen wir eine zweite verschachtelte Router-Ansichtskomponente hinzufügen. Ich zeige dir im nächsten Video, wie du das machst. 28. Ansicht der verschachtelten Router: Wie wir im letzten Video entdeckt haben, wenn wir auf den Link Über uns in unserem Menü klicken , sehen wir nur die leere Komponente „Über uns“ und keine der untergeordneten Komponenten wird angezeigt. Dies ist sinnvoll, da dies die übergeordnete Komponente ist und wir die Kontrolle darüber haben möchten, wie die untergeordneten Routen angezeigt werden. Um zwischen den untergeordneten Routen zu wechseln, müssen wir zu den über Komponenten gehen und dann zwei Dinge tun. Zuerst müssen wir einige Menü-Links hinzufügen, um zwischen den untergeordneten Komponenten zu wechseln. Um diese Komponenten tatsächlich anzuzeigen, benötigt die about Komponente auch eine eigene Router-View-Komponente, die wir unter dem Menü hinzufügen können. Lassen Sie uns innerhalb unseres div, innerhalb der Hauptvorlagen starten. Wir wollen mit einer Ebene drei Überschrift mit einer Tilde auf beiden Seiten beginnen. Dann der Text von, „Klicken Sie auf die Links unten für weitere Informationen.“ Die Navigationstags, die innerhalb einer Bestellliste verschachtelt werden. Diese auf der Bestellliste wird unsere Links enthalten. Dazu verwenden wir anstelle der Listenelemente den Router-Link und stellen sicher, dass er direkt unten geschlossen wird. Innerhalb des öffnenden Tags, können wir unsere beiden Requisiten hinzufügen, und es geht, um den Schrägstrich Geschichte Route zu verlinken. Wir können unser Tag hinzufügen, das ein Listenelement sein wird, und dann in einem Link verschachtelt. Wir brauchen die href nicht, da der View-Router unser Routing verarbeiten wird. Stattdessen werden wir nur eine Klasse hinzufügen, die nav Link sein wird. Der Text in unserer Geschichte und dies ist unsere ersten Kinderrouten. Ich werde das kopieren. Denken Sie daran, dass wir drei Links hatten. Der zweite wird für die Bestellanleitung sein. Dies wird auf die Bestellanleitung verlinken. Dann der Text der Bestellanleitung auch. Alles andere ist in Ordnung. Der dritte und letzte Link wird für die Lieferung sein. Ändern Sie den Text und auch die beiden Requisiten, speichern Sie diese Datei und klicken Sie auf den Link Über uns auf der Vorwärtsslush über Routen. Wir sehen jetzt unsere Überschrift der Stufe 3 und unsere Menü-Links unten. Das Styling braucht auch ein bisschen Arbeit, aber wir werden darauf zurückkommen. Wenn wir auf die Links der Geschichte, Bestellanleitung und Lieferung klicken, sehen wir, dass die URL oben in den oberen zwei geändert wird. Diese Links ändern die URL, aber wir sehen noch keine Komponenten. Um sie zu sehen, wie wir bereits erwähnt haben, müssen wir auch eine Router-Ansicht hinzufügen, um den ausgewählten Link direkt unter dem Menü anzuzeigen. Kurz nach unserem Nav können wir innerhalb einer Router-Ansicht hinzufügen. Schließ das ab. Speichern Sie das. Da gehen wir. Es gibt unsere Lieferinformationen, die Bestellanleitung und die Verlaufskomponenten. Schließlich können wir dies beenden, indem wir ein wenig Stil hinzufügen. Zuerst können wir die Ebene drei nach oben zentrieren. Gehen wir zurück zum über.Vue. Unter dem Skript können wir die Style-Tags hinzufügen, Tag ist die h3. Die Textzeile wird Mitte sein und dies schiebt dies nun in die Mitte. Auch die Links brauchen etwas Arbeit. Anstatt das Styling für diese Links und auch den Haupt-Header zu wiederholen, werde ich diese als globale Stile hinzufügen. Ich werde diese in der App.vue ohne das Scoped-Schlüsselwort platzieren. Dies ist nur meine persönliche Wahl, sie hier in dieser Datei hinzuzufügen. Es funktioniert auch in jeder unserer Dateien ohne das Bereichs-Tag. Fangen wir mit der Leiche an. Ich werde die Schriftart fest von Crimson Text einrichten. Mit einem einfachen setit Fallback. Der Rand kann auf Null zurückgesetzt werden. Auch die Schriftgröße des Körpers 1,5em sein. Als Nächstes die Links. Die Text-Dekoration zu keiner sein. Die Farbe, die wir unter diesem erben werden, können wir die auf Bestellliste ausrichten. Ich werde den Anzeigetyp so einstellen, dass die Flexbox verwendet wird, damit wir den Inhalt in der Mitte begründen können. Wir können jede Marge auf Null zurücksetzen. Auch einige Polsterung für unsere auf Bestellung Liste von 10 Pixeln oben und unten und Null auf der linken und rechten. Eine Hintergrundfarbe. Ich werde den Hash-Wert von f1e6da verwenden. Wir müssen auch die Aufzählungszeichen aus unseren Listeneinträgen entfernen. Wir können dies mit dem List-Stil tun, indem wir dies auf keine setzen. Speichern Sie das. Rüber zum Browser. Wir müssen auch einige Abstände zwischen diesen Links hinzufügen. Hier haben wir eine Tilde innerhalb eines Spannelements verwendet. Ich werde etwas Marge hinzufügen und auch das gleiche Tilde-Symbol und gerade darunter verwenden. Gehen wir zurück zum about.Vue und öffnen Sie innerhalb unserer Vorlage. nach jedem Router Link, können wir eine Spanne, das Tilde-Symbol, und kopieren Sie diese, fügen Sie diese direkt nach unserer Bestellanleitung. Ich arbeite an diesen als globale Stile zurück in der App.vue. nach unserem Listenelement können wir die Spanne markieren und den Rand von Null oben und unten und fünf Pixel auf der linken und rechten Seite festlegen . Rüber zum Browser. Da gehen wir. Es gibt noch ein kleines Styling zu unserem Projekt hinzuzufügen , aber wir werden später im Kurs darauf zurückkommen. unsere verschachtelten Routen jetzt funktionieren, werde ich Sie beim nächsten Mal sehen, wo wir mit Namensrouten abdecken werden. 29. So fügst du die Namen zu den Routen hinzu: Wenn wir zurück zu unserer main.js gehen, wo wir alle unsere Routen für unsere Anwendung deklariert haben. Alle Routen, die wir bisher erstellt haben, haben eine Zeichenfolge verwendet , um den Pfad der URL anzugeben, zu der Sie navigieren möchten. Wie Schrägstrich, Pfadschrägstrich Menü, Pfadschrägstrich Kontakte und auch über. Das funktioniert perfekt und es ist nichts falsch mit diesem Ansatz. Es gibt jedoch eine Alternative, die vor allem für längere Wege bequemer sein kann . Diese Alternative besteht darin, der Route einen Namen hinzuzufügen. Wir können dies innerhalb der Routen Objekte tun, oder wir müssen tun, ist es, den Namen Option hinzuzufügen. Dann können wir hier als Zeichenfolge und Namen angeben, die Sie diesem geben möchten. Ich werde dem Home-Link und dann ein Komma kurz danach hinzufügen. Diese Namen liegen ganz bei Ihnen. Gehen Sie einfach mit etwas, das die Route beschreibt, die bereit ist, zu konsumieren. Wir können dies auch zu allen unseren Over-Objekten hinzufügen, fügen Sie dies ein. Der zweite wird für den Menü-Link sein. Der nächste, dies ist für den Kontaktlink. Dann der Admin-Link. Wir können dies auch zu unseren kanalisierten Routen hinzufügen, dies ist nicht nur für unsere Top-Level-Routen. Wir können dies für unseren History-Link, die Lieferung und auch für unseren Bestellführer hinzufügen. Jetzt müssen wir nur noch diese Datei speichern. Ich werde diese innerhalb unserer Menüs verwenden, beginnend mit der header.view. Innerhalb unseres Routers haben wir bereits eine Form von Namensrouten, die früh im Abschnitt eingerichtet wurden. Jeder dieser Namen ist dynamisch an unsere Datumseigentum gebunden. Um die Namen zu nutzen, richten wir nur in einem Router ein. Innerhalb unserer Zitate müssen wir dies als Objekt übergeben und den Namen übergeben, wobei der Wert der Name unseres Links ist. Als nächstes können wir das Gleiche für alle Menü-Link-Übergabe-Objekte tun und den Namen als String festlegen. Dann könnten wir das gleiche für den Kontaktlink und auch über tun. Diese benötigen auch den dynamischen Doppelpunkt, um dies genau wie zuvor zu binden. Aber wir können jetzt die Datumseigenschaft zwischen diesen Skript-Tags entfernen , da wir dies nicht mehr benötigen. Lass uns das aufräumen. Dann können wir auf die about.view gehen, wo wir auch ein Menü haben, um diese sind derzeit nicht dynamisch. Wir müssen dem Doppelpunkt hinzufügen, um das zu binden. Wir könnten diese und aus Objekten mit der Name-Eigenschaft und dem Name-Wert entfernen , der History Link sein wird. Das gleiche für die Bestellanleitung, direkt unten. Befestigen Sie unser Objekt mit dem Namen. Dies war die Bestellung von Leitfaden Link. Die Lieferung am Dickdarm, befestigen Sie unsere Objekte. Dieser hier war Lieferlink. Dies sollten nun alle unsere Links betreut werden. Alles, was wir jetzt tun müssen, ist unsere Links zu testen, funktioniert immer noch im Browser. Lass uns rüber gehen. Wir haben das Zuhause, das Menü, den Kontakt und den Browser. Der Link „Über“ funktioniert. Schauen wir uns das in der Kopfzeile an, das muss nur ungefähr sein, sagen Sie das. Der About Link funktioniert jetzt. Wir können die verschachtelten Routen testen. Geschichte, Bestellanleitung und Lieferung. Unsere URL wird mit der richtigen URL aktualisiert. Auch wenn wir das jetzt mit einem Namen referenzieren. So können wir Namen zu unseren Routen hinzufügen, und als nächstes werden wir uns die Änderung der Routen ansehen, ohne auf Links klicken zu müssen , indem Sie router.push verwenden. 30. Router-Navigationsmethoden: Alle Navigationen, die wir bisher durchgeführt haben, sind das Ergebnis der Verwendung der Router-Link-Komponente, um uns zu dem Pfad zu führen, den wir angeben. Es gibt auch eine alternative Möglichkeit, dies zu tun, indem Sie Code verwenden, um programmgesteuert zu navigieren. Wenn wir zu den home.vue Komponenten gehen, innerhalb des Komponentenordners, haben wir hier eine Schaltfläche in Zeile sieben hinzugefügt, um den Benutzer zum Menü zu bringen. Wir haben noch keine Links zu dieser Schaltfläche hinzugefügt. Aber wir können den Router auch verwenden, um an einen beliebigen Ort zu pushen. Ich werde beginnen, indem ich einen Klick-Listener zu dieser Schaltfläche innerhalb des öffnenden Tags hinzufüge. Verwenden Sie also [unhörbar] Klick. Ich werde dies jetzt verwenden, um eine Methode zu finden, die ich Go To Menu aufrufen werde. Scrollen Sie nach unten zu unserem Skript Dann können wir das direkt nach unserer Namenseigenschaft einrichten. Wir können unsere Methoden und unseren Methodennamen Go To Menu einrichten. Wir können auf jede Methode zugreifen, die mit dem vue Router innerhalb dieser vue Instanz mit diesem.$ Router zur Verfügung gestellt wurde . Denken Sie daran, irgendetwas Präfix mit diesem $ zeigt an, dass dies nativ zu vue.js ist, oder in diesem Fall das Router-Paket statt einer benutzerdefinierten Methode, die wir selbst erstellt haben. Hier können wir einen Blick auf einige der Navigationsmethoden werfen, die vom Router zur Verfügung gestellt werden. Vue Router gibt uns die Möglichkeit, zurück oder vorwärts zu navigieren , indem Sie auf den Verlauf des Browsers zugreifen. Es macht diesen seltsamen router.go, und das ist die erste Methode, die wir betrachten werden. Dies nimmt ein einzelnes Argument an, um zu erklären, wie viele Seiten wir verschieben möchten. Positive Zahlen bewegen die Seiten im Verlauf des Browsers vorwärts. Negative Zahlen, gehen eine Seite im Browser zurück. Wir können dies testen, indem wir zu unserer Anwendung gehen. Also gib dem eine Rettung. Lassen Sie uns auf das „Menü“ klicken und klicken Sie auf „Home“. Nun, wenn wir auf die linke Seite klicken, sollte es uns zurück eine Seite, die auf das Menü war. Lasst uns das noch mal probieren. Wenn wir auf den Link über gehen und dann nach Hause, klicken Sie auf diese Schaltfläche sollte es uns zurück zur About Page. Diese Nummer kann auch mehr als eine sein, wenn Sie dafür einen Anwendungsfall haben. Eine andere Methode, die auf dem Router verfügbar ist, ist router.replace. Dies wird verwendet, um die aktuelle URL durch diejenige zu ersetzen, die wir in diesen Klammern hinzufügen. Also, wenn wir zum Menü gehen wollten, könnten wir eine Reihe von Schrägstrich Menü hinzufügen, über den Browser. Gehen wir zum Kontaktieren Sie uns, dann zu „Home“. Klicken Sie auf die Schaltfläche. Dies schiebt uns dann auf die Menüseite. Oder wie wir es uns im letzten Video angeschaut haben. Wir könnten auch in einem Objekt übergeben und benannte Routen verwenden, indem wir die name-Eigenschaft übergeben. Dann unser Menü-Link , den wir einrichten. Lasst uns das mal ausprobieren. Kontakte, zu Hause und das schiebt uns immer noch auf die Speisekarte. Es gibt jedoch einen potenziellen Nachteil bei Verwendung dieser Ersetzungsmethode. Ich werde es dir jetzt zeigen. Wenn wir zum Beispiel auf die About Page gehen und dann auf „Home“ klicken, klicken Sie auf die Schaltfläche „Let's Order“. Wenn wir dann mit dem Zurück-Button des Browsers zurück navigieren, führt dies uns zurück zur Über uns Seite statt zur Homepage, die die vorherigen Komponenten war. Der Grund, warum dies geschieht, ist, wie der Name schon sagt, der Browserverlauf wird ersetzt anstatt hinzugefügt. Wenn wir diesen Link wollen, werden wir zum Browserverlauf hinzugefügt werden , damit wir die Zurück-Buttons auf diese Weise verwenden können. Es gibt eine andere Methode, die uns als router.push zur Verfügung steht. Dies wird auch verwendet, um zu einer anderen URL zu navigieren. Aber der Unterschied ist die Routen und werden auf den Browserverlauf geschoben anstatt ersetzt. Lasst uns das mal ausprobieren. Änderungen, die gedrängt werden sollen. Wir machen das gleiche wie zuvor, wir gehen zu Über, zu Startseite, klicken Sie auf die Schaltfläche, die uns zum Menü führt. Wenn wir nun zurück gehen, werden wir jetzt in die Home-Komponente und nicht auf die About Page aufgenommen. Beide Möglichkeiten sind in Ordnung zu verwenden, aber natürlich hängt es von dem Verhalten ab, das Sie innerhalb Ihrer App erreichen möchten. 31. Schutz der globalen Navigation: Manchmal wollen wir beim Navigieren zwischen den Routen eine Aktion ausführen, noch bevor die Route navigiert wird, oder nur danach. Als Beispiel werden wir offene Warnung so einstellen, dass sie geladen wird , kurz bevor die Admin-Seite navigiert wird, was dem Benutzer mitteilt, dass es sich um einen eingeschränkten Bereich handelt, und er muss sich zuerst anmelden. Wenn Sie den Administrator verlassen, wird auch eine Warnung angezeigt, die dem Benutzer mitteilt, dass er automatisch abgemeldet wird , wenn er diesen Admin-Bereich verlässt. Dies ist aus Sicherheitsgründen. VueRouter-Gefahren deckten diesen Anwendungsfall durch die Bereitstellung von Navigationswächtern, wie die Vue Instance-Hooks. Navigationswächter ermöglichen es uns, in bestimmte Phasen der Navigation einzuhaken. Außerdem können wir sie entweder global für unsere gesamte App hinzufügen oder sie lokal auf bestimmte Routen anwenden. Lassen Sie uns beginnen, indem Sie einen Blick auf die globale vor jedem Wachen. Ich schaue mir das in der main.js an. Nach unserem Router hier können wir auf unsere Routen zugreifen und dann vor jedem Haken darauf zugreifen. Dies wird eine Funktion übernehmen, und es braucht auch drei Argumente, die wir in einem Moment betrachten werden. Da dies ein globaler Hook ist, der Code, den Sie hinzufügen, jedes Mal ausgeführt, wenn eine Routing-Aktion ausgelöst wird. Betrachten Sie beispielsweise fügt eine Warnung hinzu, die ausgelöste Navigation erkennt. Wenn wir das jetzt speichern und zum Browser übergehen, sehen wir sofort die Warnungen und auch für jeden Navigationslink, auf den wir klicken. Dies funktioniert gut, aber beachten Sie, dass es keine Seitenkomponenten auf dem Bildschirm gibt. Dies liegt daran, dass die Routing-Aktion erst abgeschlossen wird , wenn wir eine Funktion namens next aufrufen. Als nächstes ist eines der drei Argumente, in die wir vor jedem hineingehen können. Die erste ist zu, und dies ist die Route, in die wir navigieren. Die zweite kommt aus, und das ist die Route, die wir verlassen. Dann haben wir endlich die nächste Funktion, und es ist diese nächste Funktion, die Sie übergeben können, um die Navigation abzuschließen und die Seitenkomponenten zu laden. Wenn wir nun über gehen, klicken Sie auf die Warnung, die Routing-Aktion ist abgeschlossen. Wir wechseln dann zu den Seitenkomponenten, auf die wir geklickt haben. Diese nächste Funktion weist den Vue Router an, zum nächsten Navigationshook zu wechseln, falls ein solcher verfügbar ist. Wenn keine Hooks mehr verfügbar sind , ist die Navigation, wie wir hier gesehen haben , unbestätigt. Wir können diese Navigation auch stoppen, wenn wir einen Anwendungsfall dafür haben, indem wir einen booleschen Wert von false übergeben. Dadurch wird verhindert, dass die Seitenkomponenten geladen werden. Dies wird für jede Navigationsroute gleich sein. Wir haben bereits erwähnt, dass wir auch Zugang zu den Daten haben, die wir auch als Argumente übergeben haben. Um diese zu sehen, können wir in einem Konsolenprotokoll übergeben, wobei in den Wert, und wir können genau sehen, welche Daten hier zur Verfügung gestellt werden. Also lassen Sie uns dies über den Browser tun und klicken Sie mit der rechten Maustaste auf Inspect, und klicken Sie dann auf die Konsole. Auch als Randnotiz, wenn wieder reduziert, keine Konsolenfehlermeldung im Browser. Dies ist eine Einstellung in ESLint. ESLint wird beim Einrichten der Vue CLI bereitgestellt. Dies wird verwendet, um den Code auf Fehler zu überprüfen. Manchmal geben die Konsolenmeldungen bei der Verwendung von ESLint standardmäßig einen Fehler an. Also, wenn Sie dies deaktivieren müssen, gehen Sie zu der Datei package.js über, öffnen Sie dies, und im Inneren haben wir ein ES benanntes config-Objekte. Innerhalb dieses Objekts, wenn wir innerhalb der Regeln Objekte nach unten scrollen , müssen wir einen Namenswert par no console und off hinzufügen. Wenn Sie dies hinzufügen, speichern Sie die Datei und starten Sie den Entwicklungsserver neu. Sie sollten dann keine Probleme beim Anzeigen der Konsole haben, da Sie mit dem Rest des Kurses nicht fortfahren können. Auch wieder, mit ESLint, müssen wir möglicherweise alle nicht verwendeten Variablen Schrägstrich entfernen von einem nächsten entfernen, und werfen Blick auf das Objekt in der Konsole. Lassen Sie uns zum Beispiel auf das Menü klicken und öffnen Sie dieses Objekt, das von vor jedem zur Verfügung gestellt wird. Das ist also der Weg, in den wir navigieren. Wir gehen auf die Speisekarte. Dies ist der Name des Routers. Wir können sehen, ob irgendwelche Parameter übergeben wurden, und wir haben Zugriff auf eine dieser Eigenschaften innerhalb unseres Codes. Anstatt beispielsweise das Konsolenprotokoll zu verwenden, können Sie eine if-Anweisung hinzufügen, um zu überprüfen, ob der Pfad dem Bildschirm- oder Schrägstrich entspricht. Wenn es so ist, gehen wir weiter zu den Routen und wir sagen etwas anderes. Als nächstes wird gleich falsch sein. Dadurch kann der Router nun nur zu den Menükomponenten wechseln und alle Seiten werden blockiert. Da wir jetzt von next Gebrauch machen, können wir auch in den Rest unserer Argumente übergeben. Also von der nächsten, lassen Sie uns sagen, sogar den Kopf über den Browser. Wenn wir also jetzt auf die Home-Routen klicken, sehen wir keine Komponenten. Wenn wir auf Menü klicken, haben wir erlaubt, diese zu laden, da der Pfad gleich Menü ist. Versuchen wir Kontakte, und das ist blockiert. Das gleiche mit über uns, und auch die Rückkehr nach Hause zusammen mit vor jedem. Wir haben auch die After-each globale Wache zur Verfügung. Wie der Name schon sagt, wird dies aufgerufen, nachdem jede Navigation bestätigt wurde. Dies hat keinen Einfluss auf die Navigation, da sie ausgeführt wird, nachdem die Navigation abgeschlossen wurde. Daher erhält es nicht die nächste Funktion als Argument. Das Aufrufen der nächsten Funktion ist also nicht auch erforderlich. Wir können dies wieder sehen, indem wir in einer Warnung, und jeder Text im Inneren hier, wir sagen, nach jedem, speichern und über den Browser. Auch hier kann es sein, dass wir nicht brauchen, um zu argumentieren, daher müssen wir diese entfernen. Wir sehen die Warnung, klicken Sie auf OK, kontaktieren Sie uns, und das ist auch in Ordnung geladen. Wie Sie sehen können, auch ohne den nächsten Aufruf, die Seitenkomponenten immer noch gerendert, und wir sehen die Warnung wie erwartet angezeigt. Dies ist ein nie nützlicher Haken, der benötigt werden kann, wenn wir eine Aktion ausführen müssen , nachdem die Route abgeschlossen ist. Auch dies sind beide globale Wachen, die für jede Route verwendet werden. Im nächsten Video werden wir einen Blick auf die Komponenten werfen, die sich nur auf die Komponenten auswirken, von denen wir navigieren. 32. Komponentenschutz: Im letzten Video haben wir uns globale Navigationshilfen angesehen, die sich auf unsere gesamte Anwendung auswirken werden. Eine Alternative dazu besteht darin, nur einen Wächter innerhalb einer Komponente hinzuzufügen. Auf diese Weise werden nur die Komponenten, die zu und von denen navigiert werden, von der Wache betroffen. Das erste, was ich tun werde, ist, die globale Wache aus dem letzten Video innerhalb der main.js zu entfernen , so dass die Warnung nicht für jede Navigation angezeigt wird. Dann gehe ich zu den admin.view-Komponenten und beginne mit dem Komponentenordner. Ich werde einen Wächter innerhalb dieser Komponenten hinzufügen. Ich werde mit der bevor Route beginnen Wache geben, und lassen Sie uns das kurz nach unseren Komponenten hinzufügen. Dies kann an beliebiger Stelle auf der View-Instanz hinzugefügt werden, und der Name wird vor dem Routensensor sein, wiederum von und auch als Argumente übernommen wird, fügen Sie ein Komma hinzu, um dies von den Methoden Tiere zu trennen , um [unhörbare] Eigenschaft direkt oben hinzuzufügen, um mit zu arbeiten. Wir können einige Daten zurückgeben. Lassen Sie uns einen Namen, eine Eigenschaft hinzufügen und Ihren Namen innerhalb von hier hinzufügen. Vor der Route wird Eingabe vor der Route aufgerufen, die, wenn es Komponente ist bestätigt wird. Hier werde ich eine Warnung erstellen, die dem Benutzer hallo sagen wird. Wir haben den Namen des Benutzers knapp über innerhalb der Datumseigenschaft. Ich werde dies als Vorlagenzeichenfolge innerhalb der hinteren Ticks hinzufügen. Sie können innerhalb unserer Variablen hinzufügen, die dieser Name sein wird. Verwerfen befindet sich nur innerhalb der Admin-Komponente. Lassen Sie uns dies ein Speichern geben und gehen Sie zu dem Admin, der verknüpft ist, um diese Aktion zu sehen. Möglicherweise müssen wir auch unsere freien Argumente entfernen, damit dies funktioniert. Wir klicken auf einen dieser Links, wir sehen die Warnung nicht. Lassen Sie uns versuchen, zu den localhost Schrägstrich Admin-Routen zu gehen. Wir sehen nicht die Warnung, die gerade aufgestellt würde. Lass uns zur Konsole gehen und einen Blick werfen. Es wird eine rote Fehlermeldung angezeigt, die den Eigenschaftsnamen undefined nicht lesen kann. Dies ist möglicherweise nicht sofort offensichtlich, was das Problem hier ist. Es ist in der Tat nichts falsch daran, wie wir die Namenseigenschaft einrichten. In der Tat wird das Problem auftreten, wenn wir versucht haben, auf etwas aus unserer Sicht Inzidenz zuzugreifen. Der Grund für diesen Bereich liegt darin, dass der Wächter aufgerufen wird , bevor die Komponente überhaupt erstellt wird. diesem Grund haben wir keinen Zugriff auf die Daten unserer Ansicht Inzidenz. Wenn wir unsere View-Instanzdaten innerhalb dieses Hook hinzufügen müssen, müssen wir eine Arbeit hinzufügen. Um dies zu tun, müssen wir einen Anruf zurück an die nächste Funktion übergeben. Wir müssen wieder in von auch als nächstes hinzufügen. Wir können in der nächsten Funktion übergeben, die eine Callback-Funktion hinzufügen wird, die ausgeführt wird, sobald eine Komponente erstellt wurde. Er sagt über die Funktion hier drin, die ich als eine schmale Funktion hinzufügen werde, die in VM übergeben wird, die kurz für das Ansichtsmodell ist. VM kann ein beliebiger Name Ihrer Wahl sein. Aber wenn View verwendet wird, ist es ziemlich traditionell, VM als Namen innerhalb dieses Rückrufs zu verwenden. Hier haben wir Zugriff auf die gleiche View-Instanz mit VM an der Stelle, wo wir dies normalerweise verwenden. Jetzt können wir unsere Alarmbereitschaft holen. Wir können dies in unsere Callback-Funktion bringen. Wir können dies dann durch VM ersetzen, und das sollte jetzt funktionieren. Was wir hier tun, ist im Grunde eine Callback-Funktion zu erstellen. Sobald die Navigation bestätigt ist und unsere Komponente erstellt wurde. Sobald die Komponente erstellt wurde, haben wir dann Zugriff auf unsere View-Inzidenzdaten und wir können nun Zugriff ist innerhalb dieser Call-back-Funktion. Alles, was wir tun müssen, ist das Schlüsselwort dieses durch VM zu ersetzen. Speichern wir das und gehen Sie zum Browser. Lasst uns nachladen. Jetzt sehen wir die Botschaft von Hi, Chris. Wenn Sie zu anderen Routen gehen, wird dies nicht funktionieren, da wir dies nur auf den Admin-Komponenten gesagt haben. Jetzt haben wir das funktioniert und wir können zum nächsten Video übergehen, wo wir einen Blick auf die einzelnen Routen des Wächters werfen. 33. Schutz der individuellen Routen: Die letzte Art von Wächter, die ich Ihnen zeigen möchte, ist die vor dem Eingeben der Wache, die direkt dahin hinzugefügt werden kann, wo wir unsere Routen in der main.js definieren. Bevor ich dies erstelle, werde ich alle nicht benötigten Code für unsere Anwendung entfernen. Also im Admin aus dem letzten Video, können wir entfernen, bevor Route eingeben, und auch die Dateneigenschaft, die wir dafür eingerichtet haben. Speichern Sie diese Datei und über in der main.js. Ich werde diesen neuen Navigationsschutz zu den Admin-Routen hinzufügen. Also, um dies lesbarer zu machen, werde ich diese in zwei separaten Zeilen hinzufügen, getrennt durch ein Komma direkt nach unseren Komponenten können wir die vor eingeben hinzufügen , guard BeforeEnter funktioniert genau wie die globale vor dem Eingeben von Guard und nimmt auch die gleichen freien Argumente von zwei von unserem nächsten. Wir sagten, der Server als Funktion. Ich werde hier eine Warnung hinzufügen, die eine Textzeichenfolge an den Benutzer senden wird, um zu sagen, dass dieser Bereich nur für autorisierte Benutzer ist. Melden Sie sich an, um fortzufahren Nach unseren Warnungen müssen wir auch die nächste Funktion übergeben, um die Navigation abzuschließen. Sagen Sie, das sind jetzt, wenn wir zum Browser gehen, und zuerst können wir die einzelnen Routen innerhalb der Kopfzeile testen und wir sehen keine Warnung für diese vier Links. Wenn wir jetzt gehen, um Schrägstrich Admin, wo wir diese Navigation Wachen anwenden. Wir sehen, dass unsere Warnung jetzt aufgetaucht ist. Natürlich ist nur ein Auftauchen einer Warnung nicht seine eigene sicher. Aber später werden wir den Admin-Bereich ausblenden und nur für angemeldete Benutzer angezeigt. Wir werden auch später, sind sie vor Route verlassen Gott, innerhalb der Admin-Komponenten für beim Verlassen des Admin-Bereichs. Sagen Sie, loggen Sie sich automatisch den Benutzer aus, wenn Sie weg vom Admin navigieren. 34. So definierst du Scrolling-Verhalten: Wenn wir alle stimmen, möchten wir vielleicht die Scroll-Position beibehalten. Wir werden sie fragen, wenn Sie eine Seite erneut besuchen, oder alternativ möchten wir vielleicht zu einer Unterposition auf der Seite scrollen, wenn Sie in sie navigieren, auch wenn sie sich nur oben auf der Seite befindet. Mit View Router haben wir die volle Kontrolle über das Scrollverhalten. Dies hängt auch davon ab, dass der Router-Modus auf Verlaufsmodi eingestellt wird. Wir haben bereits den Verlaufsmodus in der main.js aktiviert, so dass wir dies nutzen können. Das erste, was in der main.js zu tun ist, ist das Hinzufügen der Scroll-Verhaltensfunktion zur Routerinstanz. Werfen wir einen Blick, innerhalb unseres Routers werde ich das Scroll-Verhalten hinzufügen. Innerhalb der Klammern oder der Klammern. Genau wie die Götter, die wir betrachteten, dauert es nur zu und von Routenobjekten. Auch ein Argument, das wir in einer kalten übergeben, sagen Position, die die Position ist, sagen wir vom Browser wenn die Zurück- oder Vorwärts-Tasten verwendet wurden. Sagen Sie Position. Innerhalb dieser Funktion könnten wir unser Scrollverhalten definieren. Wahrscheinlich ist der einfachste Weg, dies zu tun, ein Objekt zurückzugeben. Ich übergebe die x- und y-Position , zu der Sie scrollen möchten, wenn Sie zu einer Seite navigieren. Wir können unsere Gegenstände zurückgeben. Wir können die Exposition auf Null setzen und dann das y auf Null setzen. Mit diesem Setup wird jedes Mal, wenn wir zu einer Route navigieren, die Seite ganz nach oben gescrollt. Sie sehen dieses Muster in Aktion. Ändern wir die Y-Achse auf 200. Dadurch wird eine neue Seite geladen, 200 Pixel von oben. Lassen Sie uns das speichern und natürlich müssen wir unsere freien Argumente entfernen , damit Sie keine Linton-Probleme bekommen, da wir diese nicht verwenden. Gehen wir nach Hause. Wir haben nicht genügend Inhalte auf dieser Seite, um nach unten zu scrollen. Lassen Sie uns versuchen, das Menü und Sie können sehen, wir sind 200 Pixel von oben. Alternativ können wir einen CSS-Selektor anstelle von Koordinaten übergeben. Lassen Sie uns für einen Selektor gehen und öffnen Sie die Menükomponenten. Wir können das Scroll-Verhalten so einstellen, dass Sie zu einem unserer CSS-Selektoren nach unten scrollen. Wir können einen Knopf wählen, wir können eine Klasse wählen. Wir können jede ID oder einfach ein Element nach seinem Namen wählen. Ich gehe zum Warenkorb. Lets gehen für die Klasse der Körbe. Innerhalb der main.js. Wir können unser Objekt behalten. Was ersetzt durch einen Selektor , der eine Zeichenfolge sein wird. Da dies eine Klasse ist, können wir dies mit dem Punkt anvisieren und der Name ist Körbe. Geben Sie uns einen Safe. Gehen wir nach Hause. Dann zurück zu unserer Speisekarte. Jetzt können Sie sehen, dass der Browser nach unten zum Warenkorb gescrollt wurde. Dies funktioniert für alle ausgewählten zwei nur [unhörbar], wenn CSS verwendet wird. Denken Sie daran, dass wir den Parameter der sicheren Position erwähnt haben, den Sie übergeben haben. Dadurch wird die Bildlaufposition gespeichert, wenn die Browser vorwärts und backbones verwendet werden. Werfen wir nun einen Blick darauf, wie wir das nutzen können. Lassen Sie uns unsere Argumente noch einmal passieren, die zu, von und eine sichere Position war. Ich werde dann eine if-Anweisung hinzufügen. Die if-Anweisung wird zuerst prüfen, ob es eine gespeicherte Position gibt. Wenn gespeicherte Position wahr ist, werden wir die gespeicherte Position zurückgeben. Wir haben eine zur Verfügung, wir werden zu dieser Position scrollen. Wenn nicht, werden wir die else-Bedingung hinzufügen, wo wir einfach ein Objekt zurückgeben werden , wo wir die x- und y-Position auf Null einstellen, genau wie wir es vorher gesehen haben. Um dies in Aktion zu sehen, müssen wir zum Browser gehen und zwischen ein paar Seiten navigieren. Lassen Sie uns zuerst zum Menü gehen und dann nach unten scrollen. Wir können dann die Schaltfläche Zurück und dann die Schaltfläche Folgen verwenden, um zum Menü zurückzukehren. Ich bin eine Opposition direkt am Ende der Seite. Wenn wir dies noch einmal versuchen, wenn wir nur ein wenig nach oben scrollen, nur damit wir einige Leerzeichen im Menü sehen können. Wenn wir versuchen, rückwärts und dann vorwärts den Browser, gespeicherte Position, kehrt uns genau zu dem Punkt zurück, wo wir im Menü waren. Die letzte, die ich Ihnen zeigen möchte, behält die gespeicherte Position, genau wie diese, die wir gerade angeschaut haben. Es funktioniert jedoch, wenn zwischen Komponenten über Menü-Links gewechselt werden, anstatt nur die Zurück- oder Vorwärts-Tasten im Browser zu verwenden. Wir können wieder eine if-Anweisung verwenden. Aber anstatt die gespeicherte Position, wir die beiden Argumente verwenden und das harte auswählen, und dies wird zuerst überprüfen, ob die Route, in die wir navigieren, einen Standort-Hash gespeichert hat. Wenn dies der Fall ist, werden wir das ausgewählte so einstellen, dass es gleich dem Wert dieses Hash ist. Wir können innerhalb der geschweiften Klammern zurückkehren, ein Selektor, wie zuvor nachgeschlagen. Auf dem Selektor, den wir hinzufügen werden, ist zu.harsh. Wir müssen auch die ungenutzten Parameter entfernen, damit wir keine Fehler sehen. Dieser Begriff, wir müssen mehr Inhalt auf einer der anderen Seiten hinzufügen. Ich gehe zum Kontakt und kopiere einfach alle Inhalte vom Kontakt-Rapper. Als schießt, halten Sie das umgebende div, und fügen Sie es in ein paar mehr Male ein, nur um uns einige mehr Inhalt innerhalb von Kontakten zu geben , wo wir nach oben und unten scrollen können. Wir schließen die Sidebar wieder in der Hauptseite. Wir können auch den L-Abschnitt hier entfernen, diese Datei speichern und über in den Browser. Nun, wenn wir den Kontakt und das Menü mit einigen Inhalten haben, wo wir nach unten scrollen können, werde ich nach unten zu knapp über der Flagge scrollen. Wir haben dies als Bezugspunkt. Wechseln Sie zur Kontaktseite. Wir sehen, dass die Browserposition wieder in das Menü gespeichert wurde. Dadurch wird die gespeicherte Position zwischen den Komponenten beibehalten. Es wird nicht funktionieren, wenn Sie zum Beispiel ins Haus gehen, oder die über uns, weil wir nicht genug Inhalte haben. Blättern Sie auch nach unten. Aber das gibt Ihnen die Idee, wie es trotzdem funktioniert. Das ist es jetzt für dieses Video. Nur um dies abzuschließen, werde ich die Kontaktseite wieder einbauen , nur um Inhalte nur einmal zu ernten. Geben Sie dies, um dies zu speichern und wieder normal zu machen. Dies sind die Optionen, die uns zur Verfügung stehen, um das Scrollverhalten zu steuern. Als Nächstes werden wir unsere Routen umgestalten, indem wir sie in ihre eigene Datei verschieben. 35. So überarbeitest du deine Routen: Innerhalb unserer main.js, wo wir unsere Routen erstellt haben. Dieses Routen-Array ist im Moment ziemlich überschaubar. Wir haben nicht zu viele Setups. Aber Sie können sehen, wie es unsere main.js Datei wirklich überladen kann besonders wenn Sie mehr Navigationshilfen oder untergeordnete Komponenten hinzufügen. Wir können alle diese Routen in die main.js nehmen und sie dort in Datei platzieren, was die Dinge aufgeräumt und organisiert. Dies zu tun ist eine ziemlich einfache Einrichtung. Zuerst füge ich eine neue Datei in den Quellordner ein. Ich werde dies in die Wurzel der Quelle hinzufügen und dies die routes.js aufrufen, dann zurück zu der main.js. Alles, was wir tun müssen, ist das vollständige Routenarray zu greifen. Von der schließenden eckigen Klammer, bis hin zu unserer Konstante, werde ich das ausschneiden. Alle zu unseren Routen können wir das jetzt einfügen, da es Router ist. Wenn wir uns auf Komponenten beziehen, müssen wir diese auch importieren. Wir können diese greifen, und Visual Studio Code wird dies zu einer anderen Farbe machen. Wir können sehen, dass wir diese nicht mehr benutzen. Ich werde alle diese Komponenten ausschneiden, die nicht mehr benötigt werden, legen Sie sie in unsere routes.js. Als nächstes müssen wir dieses Objekt auch exportieren. Da dies nun in einer eigenen eigenständigen Datei ist, müssen wir diese Datei auch exportieren, damit wir sie wieder in unsere main.js importieren können. Mit einem passenden Namen von Routen, die wir ihm gerade hier gegeben haben. Die Position als Zeichenfolge ist Punktschrägstrich und dann Routen. Das ist alles, was wir jetzt tun müssen. Wir können jetzt zu unserer App gehen und testen, ob die Routen noch in Ordnung sind. Lassen Sie uns versuchen, die Menükontakte, die über, und auch unsere Kinderrouten funktionieren auch. Dies ist etwas, das bei kleinen Anwendungen nicht notwendig ist, aber es ist etwas, das eine größere oder eine wachsende Anwendung organisierter halten kann, und es ist auch etwas, das ziemlich einfach zu tun ist. 36. Ansicht der benannten Router: Wenn wir den Kopf zurück über die Haupt-App die Vue Datei. In einem hier haben wir eine Router-Ansicht. Wir haben uns bisher mit dieser Router-Ansicht beschäftigt, um zwischen Komponenten zu wechseln. Außerdem, wie wir die Router-View-Komponenten verwenden können , um untergeordnete Routen innerhalb der obigen Komponenten anzuzeigen. Wir können auch mehrere Ansichtsrouten Komponenten innerhalb unserer App verwenden. Dies ist so können wir mehrere Ansichten auf der gleichen Seite anzeigen, anstatt nur zwischen einzelnen Komponenten zu wechseln. Zum Beispiel, innerhalb dieser App die Vue Datei, haben wir diese Router-View-Komponente, um zwischen den Hauptinhalt zu wechseln. Wir sind jedoch nicht nur auf eine Steckdose beschränkt, wir können so viele Router-Ansichten hinzufügen, wie wir wollen, indem wir ihnen einen Namen geben. Wir haben bereits einige Informationskomponenten eingerichtet, die wir in der über verwenden. Wir haben die Bestellanleitung, die Lieferinformationen und die Historie. Dies wäre auch ideal, um auch auf der Homepage mit einer neuen Router-Ansicht anzuzeigen. Lassen Sie uns dies direkt unter unserer aktuellen Router-Ansicht einrichten. Ich werde dies verwenden, um diese drei Komponenten anzuzeigen. Lassen Sie uns ein div mit der Klasse von info_block_wrapper einrichten. Nun, um unsere kostenlosen Informationskomponenten anzuzeigen, können wir weitere Router-Ansichten hinzufügen, aber diesmal mit dem name-Attribut. Die Router-Ansicht mit dem öffnenden und dem schließenden Tag. Innerhalb des öffnenden Tag, können wir dann den Namen hinzufügen und wir wollen diesen Namen zu bestellen Führer setzen. Dann dupliziere das noch zwei Mal. Der zweite wird für die Lieferung sein, und der dritte wird für die Geschichte sein. Speichern Sie das. Wenn wir zurück zum Browser gehen und auf unseren „Home“ -Link klicken. Es werden keine Komponenten angezeigt, die derzeit auf dem Bildschirm angezeigt werden. Dies liegt daran, dass wir sie zuerst zu unseren Routen hinzufügen müssen. Also lasst uns zu unserer neuen routes.js Datei gehen. Da unsere Home-Links nun mehrere Komponenten anzeigen werden, müssen wir die Komponente der Eigenschaft nur hier ändern, haben ein s am Ende, um diese Komponenten zu machen. Entfernen Sie den Home-Link. Dies wird nun ein Objekt aufnehmen, in dem wir die Komponenten als Schlüsselwertpaare hinzufügen können, genau wie wir es tun, wenn wir eine Komponente innerhalb der View-Instanz registrieren. Zuerst fügen wir eine Standardkomponenten hinzu, die das Zuhause sein wird. Dies ist die Komponente, die in der Router-Ansicht ohne Namen gerendert wird. Das ist das Original, das wir gerade oben hier hatten. Dies wird es so halten, wie wir es zuvor mit den Home-Komponenten hatten. Wir können dann unsere kostenlosen Router-Views direkt unter allen mit übereinstimmenden Namen einrichten. Der erste war der Bestellführer. Wir möchten dies auf die Art und Weise Komponenten zugeordnet werden, die Bestellanleitung genannt werden. Der nächste war für die Lieferung. Wir möchten dies auf die Art und Weise Komponenten zuordnen, die als Lieferung bezeichnet werden. Der dritte war für die Geschichte. Lassen Sie uns das im Browser sehen. Zurück zur Homepage. Unsere kostenlosen Komponenten haben nun die Stelle unserer benannten Router-Views übernommen. Auch die Standard-Home-Komponenten übernehmen die Stelle der Router-Ansicht, die keinen Namen hat. Dies erfordert auch ein wenig Arbeit mit diesem Styling, wenn wir die Bestellanleitung, Lieferung und Historie Komponenten erstellt haben . Wenn wir uns die ansehen, können wir diese öffnen. Innerhalb der Vorlage haben wir eine Klasse von info_block als Wrapper hinzugefügt, und auch eine Klasse von info_block_contents, die für den Titel und auch das Bild ist. Wenn wir zurück auf die app.vue gehen. Wir umschlossen diese freien Komponenten auch in einer Klasse namens info_block_wrapper. Wir können diese Klassen im CSS anvisieren, beginnend mit der kleinsten Bildschirmansicht. Unten unten können wir den info_block_wrapper anvisieren. Dies ist ein Wrapper für unsere freien Outlets. Ich werde den Anzeigetyp auf Flex einstellen. Wir können die Flexrichtung auf den kleinsten Bildschirmen Spalte sein. Diese sind also gestapelt. Als Nächstes den einzelnen info_block. Dies ist der Wrapper für jede Komponente. Ich möchte diesem eine Hintergrundfarbe geben, die den Wert von f1e6da haben wird. Also Rand, also 10 Pixel oben und unten, um etwas Platz in und Null auf der linken und rechten, einige Polsterung auf der Innenseite des div von 10 Pixeln hinzuzufügen . Die Zahl kann auf die Infoblöcke und die Überschrift der Ebene 3 abzielen. Wenn wir zur Bestellanleitung zurückkehren, ist dies der Titel oben in jedem Block. Info_block können wir die Überschriften der Ebene 3 anvisieren. Alles, was ich hier tun werde, ist, die Textzeile in der Mitte zu sein. Wir können auch die info_blocks_content anvisieren. Dies ist der Abschnitt direkt unter dem Titel, würde erkennen Sohn auch das Bild. Sobald Sie dies auf einen Anzeigetyp oder Flex eingestellt, so können wir die Elemente in der Mitte ausrichten. Dann werde ich endlich für die kleinen Bildschirme das info_block-Bild einstellen. Alles, was ich hier tun möchte, ist, die Breite auf 30 Prozent zu beschränken. Werfen wir einen Blick auf das im Browser. Wir können das auf die kleinere Ansicht verkleinern. Das sieht jetzt auf mobilen Geräten ein bisschen besser aus. Wenn wir den Browser auf die Desktop-Größe dehnen. Wir müssen nun eine Medienabfrage hinzufügen, um dies zu erreichen. Ich werde das Medienabfrageziel die minimale Breite von 900 Pixeln einrichten. Unser Medien-Bildschirm. Auch die Mindestbreite beträgt 900 Pixel. Beginnen wir mit dem info_block. Legen Sie die Breite auf 100 Prozent fest. Der info_block_wrapper, der der Hauptwrapper für alle ist, frei von allen Komponenten. Wir können die Flexrichtung einstellen oder die Flexrichtung von Spalte überschreiben , um Zeile zu sein, so dass diese alle ausgerichtet sind. Als nächstes, wenn wir einen Blick in den Browser werfen, haben wir jetzt diese Einrichtung über die Reihe mit der Flex-Box. Aber wir wollen etwas Abstand zwischen jedem einzelnen. Um dies zu tun, werde ich diesen „Info_Block“ in der Mitte auswählen. Wir können das anvisieren, indem wir das n-th-Kind benutzen. Zurück zum CSS und Ziel den info_block und dann den Doppelpunkt. Wir können das n-th-Kind anvisieren, das eine von ihnen auswählt, die wir übergeben. Wir wollen die zweite auswählen, die in der Mitte ist. Dann werden wir nur einen Rand auf 10 Pixel setzen. Geben Sie dem einen Sparen. Nun wird dies um einige 10 Pixel Abstand um diese Komponenten hinzugefügt. Als nächstes innerhalb dieser drei Komponenten werden wir den Text auf dem Bild vertikal gestapelt haben. Wir können dies tun, indem wir die Flexrichtung auf Spalte setzen und diese auch in der Mitte ausrichten. Gehen wir für die info_block_contents. Wir können die Flexrichtung so einstellen, dass sie in einer Spalte liegt und die Elemente auch in der Mitte ausrichten. Speichern Sie das. Als Nächstes das Bild. Ich gebe diesem eine maximale Breite von 100 Prozent. Das info_block Bild, die maximale Breite, wird auf 100 Prozent beschränken. Schließlich werde ich die Flex-Box verwenden, um die Quellreihenfolge zurückzusetzen. Diese werden also abgewechselt, indem das Bild über den Text auf dem zweiten untergeordneten Element verschoben wird. Lassen Sie uns den gleichen Selektor verwenden, den wir vor der Verwendung des n-th-Kinds verwendet haben. Wir können dies hinzufügen. Aber dieses Mal wollen wir auch auf das Bild zielen. Wir können die Quellreihenfolge zurücksetzen, indem wir die Reihenfolge des Bildes so einstellen, dass es negativ ist. Speichern Sie das. Unsere kostenlosen Komponenten und jetzt auf dem größeren Bildschirm abwechselnd. Wenn wir zurück auf die mobile Ansicht verkleinern, bleibt die Quellreihenfolge genau so, wie sie war, da dies innerhalb einer Medienabfrage festgelegt wird. Dies ist nun das Ende unseres Routing-Abschnitts. Sie können sehen, dass es viel mehr zum Routing gibt, als nur zwischen Seiten zu wechseln. Ich hoffe, dieser Abschnitt hat Ihnen eine gute Vorstellung davon gegeben, was verfügbar ist. Im nächsten Abschnitt werden wir fortfahren, um Management mit View x zu bleiben. 37. Was ist Vuex?: Wenn Sie mit Vue.js Projekten arbeiten, können wir den Anwendungsstatus auf verschiedene Arten verwalten. Wenn Sie einen übergebenen Zustand zwischen Komponenten teilen, gibt es mehrere Möglichkeiten, dies zu erreichen. Daten können mithilfe von benutzerdefinierten Ereignissen von einem untergeordneten Element an eine übergeordnete Komponente und vom übergeordneten Element, dem untergeordneten Element durch Übergeben von Requisiten übergeben werden. Wir können dies auch verbessern, indem wir einen Event-Bus hinzufügen. Dieser Ereignisbus fungiert als ein einzelner zentraler Speicher, erzählte unseren Zuständen und ist im Grunde eine separate Datei, die eine View-Instanz enthält, zu der wir unseren Zustand haben können, und bei Bedarf in jede Komponente importieren können. Es ist eine großartige Lösung für kleinere bis mittelgroße Anwendungen. Aber eine einzelne Datei wie diese kann schnell wirklich groß und schwieriger für große Projekte zu warten. Dies führt uns zum Thema dieses Abschnitts, der UX. UX ist ein State-Management-Muster plus Bibliothek für die Verwaltung unserer Zustände, wobei der Zustand im Grunde die Daten sind, die in unseren Komponenten gespeichert sind. Es ist ideal für die Verwaltung großer Projekte, und es wurde vom Vue.js Call Team geschrieben, so dass es sich perfekt in Ihre Vue.js Projekte integriert. Wie der Event Bus fungiert er auch als zentraler Stall für unseren Staat, aber er hat einige Vorteile gegenüber dem Event Bus. Erlauben Sie beispielsweise, dass Sie auf eine einzige Quelle für unsere Bundesstaaten zugreifen. Wir können es immer noch in verschiedene Dateien auf Modulen aufteilen, um unseren Code zu organisieren, und wir werden uns das bald ansehen. Wir verwenden keine Requisiten und Events mit Vue.ux. Wir verwenden verschiedene Methoden, die auch diese dedizierten Methoden abdecken und es einfacher machen, Änderungen an unseren Staaten zu verfolgen und zu verwalten. Verwenden Sie einen Ereignisbus, wenn mehrere Komponenten weiterhin Änderungen am Stall mit benutzerdefinierten Ereignissen vornehmen, können diese Änderungen schwer nachzuverfolgen sein. Wir wissen möglicherweise nicht, welche Komponente welche Änderung vorgenommen hat, und dies kann zu Problemen beim Aktualisieren führen. Wie wir in diesem Abschnitt sehen werden, fungiert Vue.ux nicht nur als eine einzige Datenquelle für unseren Anwendungszustand, sondern kann auch verwendet werden, um erforderliche Daten aus anderen Quellen zu sammeln. Wir werden es verwenden, um unsere Komponentenzustände zusammen mit unseren Daten von Firebase zu halten. Dies macht unseren Shop zu einem einzigen bequemen Ort für den Zugriff auf alle Daten, die wir benötigen. jedoch Wenn Siejedocheine kleinere oder mittelgroße Anwendung einbauen, ist Vue.ux nicht immer die beste Lösung. Es kann oft ein Fall sein, dass es hinzugefügt wird, wenn Sie das Gefühl haben, dass es benötigt wird oder wenn andere Lösungen Probleme verursachen. Jetzt wissen wir, was Vue.ux ist, lassen Sie uns daran arbeiten, es zu unserem Projekt hinzuzufügen. 38. Installation und Dateistruktur: Wenn Sie mehr über Vuex lesen möchten, können Sie auf die Homepage gehen, die vuex dot vuejs dot org ist. Aber ich werde direkt darauf hineinspringen, dieses Setup in unsere Projekte zu bekommen. Das Einrichten von Vuex innerhalb unserer App ist nicht allzu schwierig. Wenn wir auf die Installation gehen, genau wie bei der Installation des Routers, die CDN-Links verfügbar, wenn Sie es vorziehen, aber da wir einen NPM verwenden, werde ich dies über innerhalb des Terminals installieren. Lassen Sie uns Visual Studio-Code öffnen, möchte den Server schließen und dann den Befehl installieren, der npm i ist, und dann den Paketnamen, der Vuex ist. Und dann geben Sie einen Moment, um zu installieren. Sobald dies getan ist, können wir den Entwicklungsserver mit npm run serve neu starten. Wir können dies zu unseren Dateien und Ordnern hinzufügen. Jetzt wollen sie sofort sagen, dass Vuex keine bestimmte Struktur für alle Dateien und Ordner erzwingt. Wir sind frei, es genau so zu handhaben, wie wir es wollen. Es ist üblich, Knoten haben einen Hauptordner für unsere Zustände innerhalb des Quellordners namens Speicher. Lasst uns das jetzt machen. Gehen wir zur Quelle, erstellen Sie einen neuen Ordner, benennen Sie diesen Store. Dann brauchen wir hier eine Haupt-JavaScript-Datei, die ich den Store dot js nennen werde. Dies wird die Hauptdatei für unseren Shop sein, und es kann ein beliebiger Name sein, den Sie wollen. Sie können dies auch allgemein als Indexpunkt js sehen. Ich werde meinen neuen Store aufrufen, um ihn von anderen Indexdateien zu unterscheiden. Dann innerhalb unserer Store-Datei müssen wir sowohl Vue als auch die Vuex-Module importieren, also importieren Sie Vue von Vue und importieren Sie auch Vuex von Vuex. Dann, genau wie bei der Installation des Routers, können wir Vue dot verwenden, um Vuex in allen unseren Dateien oder Modulen verfügbar zu machen. Dieser nächste Abschnitt sollte auch vertraut aussehen, ab dem Zeitpunkt, an dem wir den Router hinzugefügt haben. Wir müssen einen neuen Vuex-Speicher hinzufügen, und auch diesen exportieren, so dass er in unseren Dateien verfügbar ist, so exportieren Sie const Store und setzen Sie dies auf einen neuen Vuex dot Store, Kapital S innen hier übergeben wir ein Objekt und es ist in diesem Objekt wo wir einen beliebigen Anfangszustand einstellen können. Wenn Sie beispielsweise ein Spiel hatten, in dem wir die Punktzahl des Spielers aktualisiert haben, könnten wir hier eine Statuseigenschaft für die Punktzahl hinzufügen und sie zunächst auf Null setzen. Dann könnten eine oder mehrere Komponenten die Punktzahl während des Spiels aktualisieren. Die andere Datei, die ich auch hinzufügen möchte, ist der Hauptpunkt js, also lasst uns das öffnen. Wir müssen dies in unsere Hauptdatei aktualisieren, genau wie wir es mit dem Router getan haben. Zuerst müssen wir den Laden importieren. Dieser Name heißt export und der Dateipfad ist Punktschrägstrich in den Speicher. Dann wird der Dateiname, der auch gespeichert wird. Scrollen Sie nach unten, wir können dann unseren Shop innerhalb unserer View-Instanz registrieren. Unmittelbar unter dem Router. Ich werde das hier hinzufügen, gefolgt von einem Komma. Und das ist unser Shop jetzt bei Vue registriert, zurück über und installieren Sie dot js. Ich werde Dinge einrichten, indem ich einen Anfangszustandsobjekte hinzufüge. Hier drinnen. Das gesamte Zustandsobjekt funktioniert ein bisschen wie die View-Dateneigenschaft, wo wir unsere Variablen einrichten und sie aus unseren Dateien aktualisieren können. Mit diesem jetzt alles eingerichtet, werde ich dieses Video hier lassen. Wie wir durch diesen Abschnitt gehen. Es wird viel mehr Dateien und Ordner hinzugefügt und desto niedriger wird der Stall hinzugefügt. Aber für jetzt ist dies die Start-Setup und registriert verwendet werden und wird beginnen, Daten aus unserem Shop im nächsten Video zuzugreifen. 39. Anfänglicher Zustand und Zugriff auf den Speicher: Mit unserem neuen Vuex Store jetzt Setup ist es an der Zeit, unserem Shop einen Status hinzuzufügen und zu sehen, wie wir von unseren Komponenten aus darauf zugreifen können. Kurz bevor wir dies tun, haben wir einen Fehler unten in der Konsole, und das liegt daran, dass unser Vuex ein großes V benötigt, um Ihren Import ganz oben zu markieren. Wir beginnen jetzt mit dem Abrufen von Pizza-Daten aus unserer Firebase-Datenbank zusammen mit unseren Kundenbestellungen. Bis wir das jedoch eingerichtet haben, werde ich das simulieren. Wenn wir zu den menu.vue Komponenten gehen, innen hier, wenn wir zu unserer Dateneigenschaft gehen, haben wir hier unsere Beispieldaten, die Menüpunkte bekommen. Ich werde diesen ganzen Abschnitt aus unseren Komponenten ausschneiden und dann in unseren Laden überlegen. Stellen Sie sicher, dass Sie den richtigen Abschnitt greifen. Holen Sie sich Menüpunkte, lassen Sie nur die Körbe und auch den Korbtext in unserem Shop. Wir können dies nun in unser Zustandsobjekt einfügen. Dann werde ich nur den Namen ändern, um einfach Menüpunkte zu sein. Das bedeutet, dass unsere Daten nun in die Komponenten aufgenommen und innerhalb eines zentralen Speichers platziert werden , auf das jede Komponente zugreifen kann. Wie erwartet, wenn wir zum Browser gehen und dann zu den Menükomponenten gehen, klicken Sie auf den Menü-Link hier, das Menü fehlt, weil wir die Daten entfernt und in eine andere Datei gelegt haben. Wie greifen wir von innerhalb dieser Komponenten aus auf diesen Store zu? Nun, wenn wir zu unseren menu.vue Komponenten zurückkehren, können wir jetzt Zugang zu unserem Shop innerhalb des berechneten Wertes haben. Ich werde das „Get-Menüpunkte“ nennen, genau wie wir es vorher hatten. Hier drinnen werden wir diesen Punkt $ Symbol Shop zurückgeben. Dann aus unserer Store-Datei greifen wir auf die Zustandsobjekte und den Pizza-Zustand zu , den wir Menüpunkte genannt haben. Dieser Name von get Menüpunkten, passt auch zu unserer Schleife. Wenn wir unsere Schleife scrollen, rutschen über Korb, und hier sind wir, innerhalb des Menüs, haben wir Menüpunkte bekommen. Wir müssen nur ein Komma nach den berechneten Werten hinzufügen. Sag das, und zurück zu unserer Speisekarte. Wir haben jetzt die Menüdaten an Ort und Stelle. diese Daten wird nun von unserem zentralen Speicher aus zugegriffen, anstatt sie auf eine einzelne Komponente zu beschränken. Wenn Daten installieren Updates, diese Komponente und andere, die Zugriff in diesem Menü Daten auch aktualisiert oder neu gerendert werden. Wenn wir eine schnelle Änderung an einem Pizza-Namen wieder in der store.js machen, lassen Sie uns nach unten gehen und den Namen ändern, gibt dies eine speichern, zurück zu unserem Menü. Wir sehen jetzt, dass dies sofort aktualisiert wird. Schließlich greifen wir auch über den Admin-Bildschirm auf dieselben Menüpunkte zu. Gehen wir zum Admin.vue. Wir können einen berechneten Wert einrichten, genau wie wir es innerhalb des Menüs getan haben. Richten Sie unser Objekt ein und fügen Sie das Komma kurz danach hinzu. Der Name wird wieder der gleiche von get Menüpunkte und wir werden unseren Shop zurückgeben, weil auf diesen Punkt $ Symbolspeicher zugreifen, unsere Zustandsobjekte, dann wieder Menüpunkte. Scrollen Sie nach oben Wir können dies jetzt verwenden, um unsere dynamischen Daten innerhalb der Menütabelle zu erstellen, aber von ganz oben, direkt unter dem Menütitel, wenn wir nach dem Tabellenkörper suchen, können wir eine V for-Schleife erstellen. Wir werden die Get-Menüpunkte durchlaufen. Also Punkt in get Menüpunkte. Wir können auch einen Schlüssel binden und der Schlüssel wird gleich dem Element Punkt-ID sein. Jetzt können wir diesen Artikel verwenden, um den hartcodierten Wert von Margarita zu ersetzen. Innerhalb der doppelten geschweiften Klammern können wir auf den item.name zugreifen und sie sollten jetzt wiederholt werden , da es eine Schleife für alle drei unserer Artikel ist, in unserem Geschäft. Rüber zum Admin. Scrollen wir nach unten zu unserem Menü. Jetzt werden wir sehen, wie unsere kostenlosen Artikel aus unserem zentralen Speicher eingezogen werden. Dies ist eine Möglichkeit, auf Daten aus unserem Shop zuzugreifen. Als nächstes werden wir uns einen anderen möglicherweise verbesserten Weg ansehen, nämlich die Verwendung von Gettern. 40. So verbesserst du deinen Zugriff mit Zugriffsmethoden: Im letzten Video haben wir direkt über eine $store.state.menuItems auf unseren zentralen Speicher zugegriffen, genau wie Sie hier sehen. Es gibt jedoch einen besseren Weg, dies zu tun, und dies ist, indem Sie Getter zu unserem Geschäft hinzufügen. Wie dieser Name schon sagt, verwenden wir sie auch, um Daten aus unserem zentralen Speicher aufzubauen. Aber Sie denken vielleicht schon, dass wir bereits Daten aus unserem Shop bekommen. Warum benutzen wir also einen Getter? Der Grund ist, weil Sie so viel mehr mit Gettern tun können, wenn wir auf den Zustand zugreifen, bevor wir $ store direkt verwenden, ja, wir haben die Daten, die wir zurück wollten, aber als Beispiel. Was wäre, wenn wir etwas etwas komplexeres tun wollten, wie Fraktionsbestellungen aus dem Laden und dann filtern diese Aufträge so, dass nur die Aufträge angezeigt werden, die abgeschlossen sind. Um dies zu tun, nachdem wir die Daten abrufen, müssten wir diese Filteraktion innerhalb der Computing-Eigenschaft durchführen. Wenn nur eine Komponente diesen Filter durchführen wollte. Das ist kein großes Problem. Wenn jedoch mehrere Komponenten auf die gleichen gefilterten Daten zugreifen würden, werden wir Duplikatcode über unsere App haben. Um dies zu beheben, verwenden wir einen Getter, um die Daten, die wir benötigen, aus dem Speicher zu holen, führen dann jede Aktion aus, die wir wollen, wie einen Filter oder eine Berechnung. Dann erhalten die Komponenten die endgültigen oder genauen Daten, die sie benötigen. Ich denke, ein Getter ist genauso einfach wie das Hinzufügen von Zustand zu unserer Wunde. Wenn wir zu dieser store.js gehen, direkt nach unseren Zustandsobjekten und nach unten scrollen, fügen Sie ein Komma hinzu und richten Sie unser Getter-Objekt ein, genau wie ich unser Zustand. Wir fügen dann den Namen unseres Getters hinzu und ich werde dieses „GetMenuItems“ nennen. Dies wird eine Funktion sein, die den Zustand als Argument erhält. Wir verwenden dann den Staat, um auf alle Informationen zuzugreifen, die wir wollen. Also wollen wir den state.menuItems von knapp oben greifen. Wir können dann diesen GetMenuItems Getter innerhalb der Menükomponenten verwenden, lassen Sie den Kopf über dort „menu.vue“. Dann alles, was wir tun müssen, anstatt auf unseren Zustand zuzugreifen, werden wir auf unsere Getter-Objekte zugreifen und der Name war GetMenuItems. Der andere Getter, den wir brauchen, ist, die Anzahl der Bestellungen zu bekommen, die wir haben. Dafür brauchen wir ein Orders Array innerhalb unseres Staates, also zurück hier, um zu speichern, ganz unten, kurz nachdem unsere Objekte eine Ecke hinzufügen. Wir werden zunächst unser Orders Array so einstellen, dass es leer ist. Dies ist im Moment leer, aber später im Kurs werden wir diese Informationen mit Firebase synchronisieren, um die Bestellungen aus unserer Datenbank zu ziehen. Mit diesem können wir jetzt einen zweiten Getter einrichten, genannt Anzahl der Bestellungen. Dieses Setup genau wie oben. Es nimmt in den Zustand als Argument unserer Funktion und wir können auf die state.orders zugreifen. Da wir wollen, dass sie die Anzahl der Bestellungen und nicht den Inhalt kennen, können wir mit dem Grundstück darauf zugreifen. Die Anzahl der Bestellungen ist Teil unseres Admin-Bildschirms. Daher müssen wir dies zu den Admin-Komponenten hinzufügen. Gehen wir dorthin, runter zum Computereigentum. Nachdem ich Menüpunkte erhalten habe, können wir unsere Anzahl von Bestellungen hinzufügen, wo wir das zurückgeben werden. $store.getters.numberoforders. Auch während wir hier sind, können wir auch die get-Menüpunkte oben ändern, um auch den Getter zu verwenden. Also getters.getMenuItems. Wir können nun eine Reihe von Bestellungen in unseren Vorlagen verwenden. Wenn wir nach den aktuellen Bestellungen suchen, haben wir einen hart codierten Wert von fünf. Innerhalb der doppelten geschweiften Klammern können wir auf unsere Anzahl von Bestellungen zugreifen. Geben Sie dies ein Speichern und aus im Admin, laden Sie den Browser neu. Wir sehen jetzt die Ströme Aufträge ist auf Null gesetzt. Wie wir zu Beginn dieses Videos erwähnt haben, können wir, wenn wir einen Getter verwenden, wenn wir einen Getter verwenden,so ziemlich alles tun, was wir wollen, an die Daten weitergeben, bevor wir es an unsere Komponenten weitergeben. Zum Beispiel könnten wir etwas Einfaches tun, wie das seltsamste Land plus 10, und dies wird innerhalb unserer Komponente aktualisiert. Oder wir können etwas viel komplexeres tun, wie zum Beispiel das Formatieren oder Validieren von Daten, noch bevor sie unsere Komponenten erreichen. Wir wissen, wie man von unserem Shop aus auf den Zustand zugreift. Jetzt ist ein guter Zeitpunkt, um auf Mutationen zu gehen , die den Zustand in unserem Geschäft verändern. 41. So veränderst du den Zustand mit Mutationen: Wenn wir uns bisher mit dem Zustand in diesem Abschnitt beschäftigen, haben wir uns angesehen, wie man den Zustand aus unserem zentralen Speicher abruft, sowohl direkt als auch mit Gettern. Wenn ich den Zustand innerhalb des Ladens ändern möchte, und der richtige Weg, dies zu tun, besteht darin, eine Mutation zu begehen. Mutationen ändern einfach Daten innerhalb unseres Stores. Sie funktionieren in ähnlicher Weise, wenn wir ein Ereignis weglassen. Aber anstatt Daten an eine Komponente zu senden, können wir stattdessen Änderungen am Store vornehmen. Außerdem folgen Mutationen den Reaktivitätsregeln von Ansichten. Das heißt, sobald wir eine Mutation verwenden, um die Zustände zu ändern, werden alle Komponenten, die den Zustand beobachten, automatisch aktualisiert. Innerhalb des Menüs auf dem „Warenkorb“ haben wir diese Schaltfläche „Bestellung aufgeben“, und wir haben auch die leeren Bestellungen Array innerhalb unseres zentralen Speichers. Dies wäre ein guter Anwendungsfall für eine Mutation, um den zentralen Speicher durch Drücken des Inhalts der Bestellung mutieren zu können . Wenn wir auf die Schaltfläche klicken, um diese Aufträge Array. Genau wie Getter haben wir unsere Mutationen im Laden eingerichtet. Also werde ich dies als ein Objekt hinzufügen, das durch ein Komma getrennt ist. Es geht also um Mutationen. Dann können wir den Namen der Mutation hinzufügen. Diese Mutation fügt eine Bestellung hinzu. Also werde ich das einfach „Addorder“ nennen. Die Mutation akzeptiert die an sie übergebenen Zustände als erstes Argument, genau wie sie es tut, wenn Sie Getter schleichen. Dann ändern wir den Zustand, wie wir es innerhalb dieser Pfeilfunktion wollen. Als Beispiel, wenn unsere Bestellungen eine Reihe von Bestellungen waren, wie diese, wenn wir dies auf eins setzen, könnten wir dann den Zustand setzen, obwohl Aufträge noch eins mit ++ sind. Um diese Mutation aufzurufen, müssen wir zu unseren „Menükomponenten“ gehen und eine neue Methode hinzufügen. Also gehen wir über zum „menu.view“ und ich werde diese Methode „add new order“ nennen. Wenn wir einen Blick auf die Schaltfläche „Order platzieren“ innerhalb des öffnenden Tags und will einen „Klick“ -Listener hinzufügen und setzen den Sub, um unsere Methode namens „AddNew Order“ zu sein , scrollen Sie nach unten und wir können erstellen, ist direkt unten. Innerhalb unserer Methoden haben wir eine ganze Reihe. Also kurz nach Abnahme Menge, können wir neue Bestellung hinzufügen. Das erste, was wir tun müssen, ist, tatsächlich auf den Laden zugreifen. Genau wie bevor wir das damit machen können. $store. Wir müssen dann die Änderung mit der Commit-Methode begehen. Die Änderung, die wir übernehmen, ist der Name der Mutation, die wir gerade im Store erstellt haben, die „addorder“ genannt wurde. Wir übergeben dies als String, und dann, nachdem wir die Bestellung hinzugefügt haben, wäre es sinnvoll, den Korb innerhalb unserer Komponenten zu löschen , indem wir den Korb als leeres Array setzen. Dieser Korb ist knapp über innerhalb der Datumseigenschaft, die dieses Array gerade hier. Also müssen wir das klären, sobald die Bestellung aufgegeben wurde. Wir können dies einfach mit this.baskets tun ist ein leeres Array. Schließlich können wir auch eine Nachricht hinzufügen, um zu sagen, dass unsere Bestellung aufgegeben wurde. Wir haben bereits eine Datumseigenschaft von Korbtext. Einfach diesen Korb blasen, der uns derzeit mitteilt, dass der Korb leer ist, bevor ein Benutzer eine Pizza hinzufügt. Alles, was wir jetzt tun müssen, ist, diese Daten mit einer neuen Nachricht zu ändern. Dieser Stop-Korb-Text wird also gleich „Vielen Dank, Ihre Bestellung wurde aufgegeben.“ Das nächste, was zu tun ist, ist tatsächlich zu überprüfen, ob der Wert der Bestellungen in unserem Geschäft bei jedem Klick erhöht wurde. Wir können dies jetzt in die Menüvorlage einfügen. Also werde ich nur bis zum Ende scrollen, und wir können dies überall innerhalb der doppelten geschweiften Klammern hinzufügen , damit es auf unseren Shop zugreifen kann, this.store. Wir müssen auf den Staat, die Aufträge oder andere Projekte zugreifen , und im Menü sehen wir den Wert eines. Lassen Sie uns eine neue Bestellung erstellen. Bestellung aufgeben, wir bekommen den Wert von zwei. Lassen Sie uns noch einen und den Wert von drei versuchen. Dies ist der einfachste Weg, um eine Mutation zu begehen. Wir wollen dies jedoch verbessern, indem wir den vollständigen Inhalt des Warenkorbs in unser Orders Array schieben , anstatt nur die Zahl zu erhöhen. Um dies zu tun, fügen wir eine sogenannte Payload hinzu. Eine Nutzlast ist ein zusätzliches Argument, das wir durch die Mutation übergeben, das die Daten enthält, die wir übernehmen möchten. Sie können sich dies als Hinzufügen von Argumenten zu einer Funktion vorstellen, aber wir werden einige zusätzliche Informationen übergeben. Wir können dies wieder über in der „addneworder“ -Methode tun. Lassen Sie uns nach unten scrollen, und kurz nach „addorder“ fügen Sie ein Komma hinzu und dann können wir die Nutzlast hinzufügen, die der Inhalt von „this.basket“ ist. Dann übergeben wir in der store.js diese Nutzlast als zweites Argument an die Mutation. Also jetzt, anstatt Staat allein zu verwenden, müssen wir dies innerhalb der Klammern umgeben. Geben Sie die Aufträge ein, der Name dieser Nutzlast ist „up to to“, aber natürlich ist es am besten, so beschreibend wie möglich über die Daten zu sein , die Sie enthalten werden. Nun, anstatt die Aufträge zu erhöhen, können wir jetzt die neuen Aufträge in das Array schieben. Wir können dann die JavaScript-Push-Methode verwenden, bei der wir die Aufträge verschieben werden, und wir müssen dies auch wieder in ein Array ändern. Gibt uns ein Speichern und dies sollte jetzt eine Mutation Arbeit in sein. Wenn wir zum Browser und in das Menü gehen, sehen wir ein leeres Array. Lassen Sie uns versuchen, einige Menüpunkte hinzuzufügen und eine Bestellung aufzugeben, und da gehen wir. Da sind unsere Margarita und unsere Pepperoni. Welches der beiden Elemente haben wir hinzugefügt? Versuchen wir es mit einem neuen. Platzieren Sie die Bestellung, und wir sehen, dass die dritte Pizza zu unserem Array hinzugefügt wurde. So großartig. Wir können jetzt sehen, dass der Laden mit dem Inhalt unseres Warenkorbs aktualisiert wurde. Es sieht im Moment nicht zu hübsch aus, aber das lässt sich später im Kurs leicht beheben. Die Hauptsache ist, dass Sie jetzt wissen, wie Sie erfolgreich auf den zentralen Speicher zugreifen und auch Änderungen daran übernehmen können. 42. Was sind Actions?: Bisher haben wir uns die Verwendung von Gettern angesehen, um den Zustand aus unserem zentralen Speicher abzurufen. Auch Mutationen, die wir uns gerade angesehen haben, begehen Veränderungen an unserem Stand. Mutationen machen ihre Arbeit vollkommen gut, aber um eines zu beachten, müssen Mutationen synchron sein. Wir können keinen asynchronen Code innerhalb einer Mutation hinzufügen. Wenn Sie sich nicht sicher sind, was das bedeutet, müssen wir mit synchronem Code warten, bis die Aufgabe beendet ist, bevor Sie mit der nächsten fortfahren. Wir haben eine asynchrone Aufgabe, wir müssen nicht warten, bis eine vorherige Aufgabe zuerst abgeschlossen ist. Diese können nebeneinander laufen. Es macht Sinn, dass Mutationen synchron verlaufen. Wenn jedoch mehrere Mutationen gleichzeitig auftreten, werden wir nicht in der Lage sein zu verfolgen, welche für jeden Zustandswechsel am meisten verantwortlich ist. Wenn wir einen asynchronen Code ausgeführt haben, können wir nicht sagen, wie lange dieser Prozess dauern wird. Daher kann eine Mutation, die zuerst begonnen wurde, nicht notwendigerweise zuerst enden. Eine Mutation, die synchron läuft, bedeutet, dass sie zuerst vollständig enden muss, bevor die nächsten beginnen, und dies macht die Verfolgung ihrer Änderungen vorhersehbarer. Hier kommen Aktionen ins Spiel. Aktionen können asynchronen Code enthalten und sind ein bisschen wie Mutationen. Aktionen mutieren den Zustand jedoch nicht direkt, sondern begehen eine Mutation. Dies bedeutet, dass der asynchrone Code ausgeführt werden muss, z. B. das Anfordern von Daten von einem Server. Eine Aktion wird über eine Mutation verwendet werden. Wir können Aktionen verwenden, unabhängig davon, ob sie asynchron sind oder nicht, und Sie können die Dinge sogar konsistenter halten , indem Sie immer eine Aktion durchlaufen, wenn Sie es bevorzugen, also ist dies die Theorie hinter Aktionen. Als nächstes werden wir dies innerhalb unserer Anwendung in die Praxis umsetzen. 43. So stellst du Benutzer mit Actions ein: Ich werde jetzt eine Aktion einrichten, um den aktuell angemeldeten Benutzer festzulegen. Dieser Benutzer wird innerhalb unserer Staaten gespeichert. Lassen Sie uns die aktuelle Benutzereigenschaft zu Beginn hinzufügen. Innerhalb der store.js, direkt unter unserem Orders Array. Der aktuelle Benutzer, den wir anfangs auf null setzen werden. Dies wird zunächst auf null gesetzt, bis ein Benutzer angemeldet ist, und dann wird dies durch ein Objekt ersetzt, das die Benutzerdetails enthält. Ich werde die Zustandsänderung immer noch als Mutation durchführen. Aber wie wir im letzten Video erwähnt haben, werden wir eine Aktion verwenden, um diese Mutation zu begehen. Lassen Sie uns zuerst unseren Benutzer einrichten nur blasen Add-Reihenfolge, die wir den UserStatus nennen werden, und wir wollen in den Zuständen und auch dem Benutzer übergeben, was unsere Payload Vergangenheit sein wird, wenn wir diese Mutation begehen. Als Pfeilfunktion wird diese Nutzlast entweder die Details des angemeldeten Benutzers sein, wenn nicht der Benutzer null ist. Hier können wir eine if-Anweisung hinzufügen, um zu überprüfen, ob der Benutzer eingeloggt ist. Wenn es wahr ist, werden wir diesen State.CurrentUser mit dem Wert von user aktualisieren. Wenn sich der Benutzer abmeldet, können wir auch den aktuellen Benutzer aktualisieren. Aber dieses Mal möchten wir den Benutzer so einstellen, dass er wieder auf null ist. Dies ist eine Möglichkeit, dies mit einer if... else-Anweisung einzurichten oder alternativ können wir den ternären JavaScript-Operator verwenden, um zu überprüfen, ob der Benutzer gleich null ist. Wenn dies der Fall ist, können wir eine Bedingung zur Verfügung stellen, in der wir diese Date.CurrentUser auf null setzen. Wenn nicht, ist die Alternative, dass wir den aktuellen Benutzer so einstellen , dass er dem Benutzer entspricht, der von der Nutzlast übergeben wurde. So oder so ist völlig gültig, und das ist unsere Mutation jetzt abgeschlossen. Wir müssen jetzt die Aktion aufstellen, die dies nennen wird. Wir fügen die Actions-Eigenschaft in das, was wir speichern. Genau wie bei den Rinnen Mutationen. Wir richten das als Objekt ein. Wir können die Benutzerstatusmutationen aufrufen, sowohl beim Anmelden als auch beim Abmelden. Beginnen wir mit dem Zeichen in Aktion, das zwei Argumente annehmen wird. Diese Funktion wird eine Synchronisierung sein, und diese ersten Argumente, die Sie übergeben, sind das Kontextobjekt, und die zweite ist der Benutzer. Richten Sie unsere Pfeilfunktion ein. Das Contextobjekt verfügt über eine Commit-Methode. Wir können das in einem Augenblick nutzen, um unsere Mutation auszulösen. Nun, zuerst, wenn wir in die login.vue Datei und zu unseren Methoden gehen, haben wir bereits diese Anmeldefunktion hier. Ich werde das hier in unseren zentralen Laden bringen. Wenn wir alle Inhalte zwischen melden Sie sich an, der catch-Abschnitt und auch versuchen, weniger zu machen. Wir lassen diese geschweiften Klammern einfach auf der Außenseite. Wenn wir zurück zu unserem Shop gehen, können wir das jetzt in unser Login einfügen. Wenn wir nach oben scrollen, wenn wir die Anmelde- und Passwort-Methode verwenden, die von Firebase müssen wir die E-Mail und auch das Passwort übergeben. Wenn wir diese Aktion bald aufrufen, wird die Nutzlast des Nutzers die E-Mail und das Passwort enthalten , so dass wir dies für den Benutzer ändern müssen. Es wird die Benutzerdaten enthalten. Dies wird unsere Nutzerinformationen enthalten. Wir können dies innerhalb einer Konstante namens Benutzerdaten speichern. Dies wird im Rückgabewert von Firebase gespeichert und wir können diese verwenden, um unsere Mutation direkt oben zu begehen. Jetzt habe ich diese Benutzerdaten gespeichert, bei denen Sie von Firebase zurückkommen. Wir können nun auf unser Kontextobjekt zugreifen, das uns erlaubt, auf alle Methoden und Eigenschaften der Instanz des Stores zuzugreifen. Zum Beispiel können wir auf unseren Zustand mit dem context.state zugreifen, oder wir können auf einen der oben genannten Getter zugreifen, einfach so. Wir wollen die Commit-Methode verwenden, aber wir können dies auch vereinfachen, indem wir ES6-Argumentstrukturierung verwenden. Anstatt den vollständigen Kontext zu greifen, wollen wir nur die Commit-Methode ziehen, was bedeutet, dass wir direkt mit dem Namen darauf zugreifen können. Was genau wollen wir begehen? Wo wollen wir eine Mutation durch den Namen des Benutzerstatus zu begehen. Wir werden das als String übergeben. Das zweite Argument ist die Benutzerinformationen, die wir von Firebase zurückhaben, die wir in Benutzerdaten gespeichert haben und wir können auf unsere Benutzerobjekte zugreifen. Wir verwenden auch diese FireBaseAuth, die auch hier referenziert. Wir müssen dies auch an der Spitze der Datei importieren. Wir müssen dies als Namensimport importieren. FireBaseAuth lassen Sie mich Paketspeicherort von../und dann Firebase. Jetzt weiß ich, dass dies eine Menge Schritte sein mag, um den Benutzer in unseren Zustand zu versetzen. Aber denken Sie daran, dass dieser Aktionsschritt hinzugefügt wurde, so dass wir keine Einschränkungen für die Verwendung von asynchronem Code mit dieser Aktion haben. Alles jetzt Setup, das letzte, was zu tun ist, ist es einen Versuch zu geben. Wir tun dies, indem wir die Aktion aus unseren Komponenten senden und das ist es, was wir als Nächstes tun werden. 44. Dispatching Actions: Im letzten Video verschieben wir den Anmeldecode von den login.view-Komponenten in unseren zentralen Speicher. Jetzt ist die Aktion abgeschlossen. Wir müssen es von unseren Login-Komponenten versenden, indem wir die E-Mail-Adresse und das Passwort des Benutzers eingeben, damit es funktioniert. Ich gehe zur login.view-Komponente und scrollen dann nach unten zu unserer Anmeldemethode. Die Anmeldemethode ist derzeit leer und wir werden jetzt damit beginnen, daran zu arbeiten. Wir können damit beginnen, das async-Schlüsselwort zu entfernen. Dies liegt daran, dass die Funktion im zentralen Speicher als asynchron markiert ist und dann innen hier, werden wir beginnen, indem wir ein Benutzerobjekt erstellen , das unsere E-Mail und unser Passwort speichern wird. Wir werden die E-Mail von der Dateneigenschaft einrichten, die Sie mit der Shop-E-Mail zugreifen können und auch das Passwort ist von der Dateneigenschaft auch verfügbar. Das nächste, was Sie direkt nach unserem Benutzerobjekt tun müssen, ist, in Aktion zu versenden die Details als Nutzlast zu übergeben. Also greifen Sie auf unser Geschäft zu, das wir in nur einer Minute importieren werden. Wir müssen dann die Dispatch-Methode aufrufen, die im Namen der Aktion stattfinden wird. Der Name der Aktion ist SignIn, und dann übergeben wir die Nutzlast, die unser Benutzerobjekt ist. Es ist gut genug, dass wir unsere Firebase-Referenz nicht mehr benötigen, da Sie diese in eine andere Datei verschoben haben. An Ort und Stelle, müssen wir unseren Laden importieren. Der Dateipfad als String ist../. Wir müssen in unseren Laden gehen, und dann ist der Name der Datei unser Geschäft. Jetzt müssen wir überprüfen, dass dies funktioniert, indem wir den Wert von currentUser in unserer App anzeigen. Denken Sie daran, CurrentUser war der Name eines Zustands, dem wir in der store.js gesetzt. Dies ist ein CurrentUser, der als Standard auf null gesetzt ist und wir wissen von früher im Abschnitt, dass, um den Inhalt unserer Zustände zu erhalten. Wir müssen Getter benutzen. Lassen Sie uns den Server für unseren CurrentUser einstellen. Im Inneren des Getters befinden sich Objekte, die durch ein Komma getrennt sind. Ich werde dies den CurrenUser aufrufen und unsere Funktion übergeben, die den CurrentUser aus dem Status holt. Jetzt haben wir unseren Getter. Ich werde dies zu einer Computereigenschaft von in den admin.view-Komponenten hinzufügen, also scrollen Sie nach unten zu JavaScript. Sie können dies nun innerhalb des berechneten Abschnitts hinzufügen. Der Name von CurrentUser. Wir werden den Wert zurückgeben, von diesem stammt. $store, greifen Sie auf das Getters-Objekt und den CurrentUser zu. Dann innerhalb unserer Vorlage können wir den Wert überall in unserem Code als Test ausgeben. Ich gehe zum Login als Abschnitt und gebe dies einfach innerhalb der doppelten geschweiften Klammern aus. Sehen Sie, dass dieser Kontexter funktioniert, indem Sie sich anmelden und unsere Benutzerobjekte sehen. Gehen wir zu unserem Admin, wo wir uns einloggen können. Scrollen Sie nach unten, wir sind derzeit nicht als jemand eingeloggt. Melden Sie sich mit unserer E-Mail-Adresse und unserem Passwort an, das innerhalb einer Firebase eingerichtet wurde, an. Wenn wir nun nach oben scrollen, sehen wir alle Benutzerdaten, die für unseren CurrentUser in einer Firebase gespeichert sind, aber wir brauchen nicht alle diese Informationen innerhalb unserer Anwendung. Ich werde diese Verwendungsinformationen nach unten filtern, um nur die E-Mail des aktuell angemeldeten Benutzers anzuzeigen. Wir können innerhalb dieses Objekts sehen, gibt es hier einen E-Mail-Schlüssel und um nur diese E-Mail-Adresse zurückzugeben, können wir eine kleine Änderung an unserer Mutation innerhalb unserer store.js vornehmen. Alles, was Sie tun müssen, ist, den CurrentUser innerhalb des UserStatus zu setzen. Wir werden den CurrentUser so einstellen, dass er gleich user.email ist. Dadurch wird die E-Mail-Adresse von den Benutzerobjekten abgerufen. Gehen wir nach unten und melden Sie sich noch einmal an, klicken Sie auf „Anmelden“, scrollen Sie nach oben, und jetzt haben wir nur die eingeloggte E-Mail-Adresse. Wir müssen auch die Abmeldemethode in den Store wechseln, innerhalb der admin.view, wo wir unsere Abmeldemethode haben. Wir können den Inhalt ausschneiden und ihn in unseren Laden verschieben. Also melden Sie sich ab, beschreiben Sie alle Inhalte. Wir können dies zu unserer store.js übernehmen, die eine Aktion sein wird. Wir können dies hinzufügen, um das SignIn zu stopfen, also getrennt durch ein Komma, heißt dies SignOut, was ich als asynchrone Funktion hinzufügen werde. Wieder einmal können wir unsere Commit-Methode destrukturieren und den Rest unserer Funktion einrichten und dann den Inhalt einfügen. Wird diese Aktion wieder verwenden, um die Statusmethode des Benutzers zu übertragen , und da wir uns abmelden, möchten wir, dass der Benutzer null ist. Also gleich nach dem Schnitt Abschnitt, werden wir den Namen unserer Mutation übergeben, die der UserStatus ist, und setzen die Nutzlast auf null. Also jetzt haben wir unsere SignOut Aktion alle jetzt eingerichtet, wir können dies jetzt über in der admin.view versenden. Lassen Sie uns zu unserer Anmeldemethode gehen, wo wir den Inhalt vor. Hier drinnen werden wir auf den Stern zugreifen, der in nur einem Moment importiert wird. Wir können den Versand anrufen. Auf dem Namen der Aktion, die wir versenden möchten, ist SignOut. Wir können dann unseren Firebase-Impuls direkt oben durch unseren Speicher ersetzen und der Dateipfad ist../. Wir können auf den Store-Ordner und dann die Store-Datei zugreifen. Speichern Sie diese unter in den Projekten. Wir sehen keine Details, also loggen wir uns ein. Scrollen Sie nach oben und wir haben die angemeldete Benutzer-E-Mail, klicken Sie auf „Abmelden“. Wir sehen nun diese verschiebt die Benutzer-E-Mail vom Bildschirm. So ist unsere Anmeldemethode jetzt noch eine Arbeit in, aber dieses Mal wird es in unserem zentralen Speicher platziert. Wir machen gute Fortschritte mit Vue X und auch mit unserem Projekt. Vue X kann zunächst ein wenig verwirrend erscheinen. Es ist nur etwas, das mit der Praxis klarer wird. Sie haben bereits die meisten Kernkonzepte von Vue X gesehen also gibt es nicht so viel mehr zu lernen. Vieles von dem, was wir für den Rest dieses Abschnitts behandeln, konzentriert sich darauf , unseren Code zu vereinfachen und ihn besser zu organisieren. 45. Zugriffsmethodenübersicht: Wir wissen jetzt, wie man Getter benutzt, um von unserem Stand aus auf den Zustand zuzugreifen. Wir fügen diese Getter dann als berechnete Eigenschaften wie hier innerhalb der Admin-Komponenten hinzu, damit wir sie aktualisieren können, wenn sich der Zustand ändert. Das funktioniert völlig gut, aber es gibt eine Möglichkeit, diesen Code zu vereinfachen, was nützlich ist, wenn wir viel mehr Getter haben, die Sie einrichten möchten. Wir können dies tun, indem wir MapGetters verwenden, was ein Helfer von Vuex ist. Um dies zu nutzen, müssen wir diese zuerst aus unserer Vuex-Bibliothek importieren. Oben oben in unseren Skripten können wir als benannter Import MapGetters importieren, der aus dem vuex-Modul stammt, so dass wir den Dateipfad nicht benötigen. Wir können dann MapGetters zu unseren berechneten Eigenschaftenobjekten hinzufügen. Im Inneren können wir die drei Punkte verwenden, der ES6 Spread-Operator , der es uns ermöglicht, diese Getter mit allen vorhandenen Computereigenschaften zu mischen , die Sie möglicherweise bereits haben. MapGetters nimmt ein Array , in dem wir die Namen der Getter hinzufügen, die Sie verwenden möchten. Die Getter, die Sie verwenden möchten, sind einfach unten aufgeführt. Wir haben; erhalten Menüelemente, die als Zeichenfolge durch ein Komma getrennt hinzugefügt wurden, wir haben auch Anzahl von Bestellungen und der dritte ist der aktuelle Benutzer. Jetzt können wir die vorhandenen berechneten Eigenschaften löschen. Geben Sie dies zum Speichern und gehen Sie zum Browser. Wir können testen, ob das funktioniert. Scrollen wir nach unten zu unserem Menü. Wir haben die Menüpunkte, so bekommen Menüpunkte noch funktioniert. Wir können testen, dass der aktuelle Benutzer auch arbeitet, indem wir uns anmelden. Scrollen Sie nach oben und wir sehen die E-Mail gerade dort, was bedeutet, dass alles jetzt gut funktioniert. nicht allzu langer Zeit haben wir bei der Verwendung des Spread-Operators eine Fehlermeldung erhalten und wir mussten ein zusätzliches Babel-Plugin hinzufügen. Dies ist jetzt bei der neuesten Version der Vue CLI nicht mehr der Fall. Um dies zu beenden, können wir zurück zu Visual Studio Code gehen, und wiederholen Sie dies über in den Menükomponenten. Wir können den Helfer von Vuex an der Spitze unseres Skripts importieren, das MapGetters von vuex war und scrollen Sie nach unten zu unserer Berechnung seiner Aktion. Wir könnten abrufen Menüelemente entfernen und dies durch MapGetters ersetzen. Denken Sie daran, dass dies ein Array annimmt und der String-Name wurde Menüelemente erhalten. Wir können auch weitere Getter in der Zukunft hinzufügen, wenn wir möchten, aber jetzt speichern wir das und gehen über zum Menü. Klicken Sie auf den Menü-Link, und unser Menü funktioniert jetzt noch. Wenn Sie wie ich gerade ein leeres Array in den Körben gesehen haben, wenn es leer ist, können wir diesen Code auch von früher entfernen. Wenn Sie zum Menü gehen.view gehen, können wir bis zu unserer Vorlage scrollen, und werde dies nicht von knapp unter unserem Korbtext entfernen, wo ich es setzen werde. Bundesstaat. Befehle. Ich sollte das entfernen, und unser Korb ist jetzt aktualisiert. Mit dem MapGetters-Helfer ist es eine nützliche Möglichkeit, unseren Code zu organisieren und die Vorteile werden noch größer, wenn wir mehr Getter zu unserer Anwendung hinzufügen. 46. So trennst du unseren Speicher in separate Dateien: Alle unsere Zustände, sowohl von der Anwendung als auch von externen Quellen, wie Firebase innerhalb unseres zentralen Speichers zu haben sowohl von der Anwendung als auch von externen Quellen, , können bequem sein. Wie Sie erwarten würden, kann es ziemlich überfüllt werden, wenn unsere Anwendung mit allen Aktionen, Mutationen und den Gettern an einem Ort wächst . Zum Glück beschränkt Vuex nicht die Art und Weise, wie wir unser Geschäft strukturieren. Wir können es in mehrere Dateien aufteilen, um unseren Code besser organisiert und wartbar zu machen. In diesem Video und auch im nächsten werde ich Ihnen ein paar verschiedene Möglichkeiten zeigen, Ihren Shop zu organisieren und auch wie Sie Module verwenden. Natürlich können Sie auch Ihren eigenen bevorzugten Weg finden. Der erste Weg, den ich abdecken werde, ist die Aufteilung unserer Aktionen, Getter und Mutationen in ihre eigenen separaten Dateien. Diese drei neuen Dateien werden auch im Store-Ordner gespeichert. Gehen wir rüber zu unserem Geschäft in der Sidebar. Und wir können für jede dieser Dateien eine neue Datei erstellen. Die erste ist actions.js, die nächste ist für die getters.js und die dritte für die Mutationen. Ich werde beginnen, indem ich unsere Aktionen aus der Hauptdatei store.js zitiere und sie dann in unsere neue Aktionsdatei einfüge. Also hier drinnen, lassen Sie uns nach unseren Aktionen suchen und wir können alles innerhalb der umgebenden geschweiften Klammer entfernen . Ich melde mich ab und melde mich an, wobei nur die geschweiften Klammern um diesen herum bleiben. Nehmen Sie diese heraus und gehen Sie dann zur actions.js. Wir können diese einfügen, und wir müssen diese auch als Konstante exportieren. So können wir diese innerhalb unseres Hauptgeschäfts importieren. Also die erste der Anmeldung, können wir diese als Konstante exportieren. Da es jetzt nicht mehr Teil des Objekts der Methode ist, müssen wir dies auch in eine Standalone-Funktion verwandeln. Wir können einen gleich nach dem Funktionsnamen hinzufügen. Wir können dies auch für das Abmelden direkt unten wiederholen. Exportieren Sie also const, ersetzen Sie den Doppelpunkt durch den Gleichheitswert. Wir müssen auch unsere FireBaseAuth importieren, oben. Dies ist ein Name Export. Also FireBaseAuth und das ist aus dem Dateipfad von Punkt-Punkt-Schrägstrich und dann Firebase. Wenn wir nach unten scrollen, da diese auch jetzt Standalone-Funktionen, müssen wir nur das Komma entfernen, das die Anmeldung trennt und sich abmeldet. Wir können genau das gleiche tun, wenn Sie mehr Aktionen haben, und wir werden später weitere Aktionen in diesem Projekt hinzufügen. Moment müssen wir dies jedoch wieder in unsere store.js importieren, wo wir diese einfach entfernen. Fangen wir an der Spitze an. Wir können unsere Importe aus Firebase entfernen, und stattdessen könnten wir dies durch einen Stern ersetzen, mit dem wir den gesamten Inhalt unserer neuen Datei anstatt eines einzelnen Mitglieds importieren. Dadurch werden alle unsere Aktionen aus unserer Aktionsdatei importiert. Dieser Name der Aktionen liegt an uns, aber das ist einfach der Name, den wir verwenden, um auf das Importobjekt zu verweisen. Einige Aktionen machen Sinn. Dies ist im gleichen Ordner, also einfach Punkt Schrägstrich und dann Aktionen. Wir können dann bis zum Ende der Datei gehen, wo wir unsere Aktionen Objekt haben. Wir können den Doppelpunkt und die geschweiften Klammern entfernen, einen Verweis auf die Aktionen, die wir gerade importiert haben. Wir können nun testen, dass diese Aktion noch funktioniert, indem Sie sich ein- und abmelden. So sehen wir immer noch die E-Mail des Benutzers im Admin. Lassen Sie uns über den Schrägstrich Admin, scrollen Sie nach unten, melden Sie sich an. Sie auf die Schaltfläche „Anmelden“. Wenn wir dann nach oben scrollen, sehen wir die E-Mail des angemeldeten Benutzers. Klicken Sie auf „Abmelden“ und beide Dateifunktionen scheinen jetzt noch zu funktionieren. Also müssen wir genau das gleiche für unsere Getter und Mutationen tun. Dies ist definitiv eine Herausforderung, die Sie selbst tun können. Folgen Sie einfach dem gleichen Prozess verschieben Sie die Mutationen und die Getter in ihre eigene Datei, genau wie wir es mit den Aktionen getan haben. Also pausieren Sie das Video und geben Sie es los, wenn Sie sich sicher fühlen, dies zu tun. Ich werde von vorne in den Gettern beginnen. Gehen Sie rüber zur store.js. Wir können alle drei unserer Getter packen, rüber in unsere neue Datei, fügen Sie diese in, Export const, alle drei. Denken Sie daran, da es sich hierbei um eigenständige Funktionen handelt, müssen wir den Doppelpunkt durch einen Gleichheitswert ersetzen, da diese nicht mehr Teil eines Objekts sind. Wir müssen auch die Kommas entfernen, die jedes trennen , und dann können wir diese wieder in unsere store.js importieren. Genau wie zuvor können wir das Objekt entfernen, das auf eine Getter-Referenz zeigt, die wir jetzt ganz oben importieren können, die Getter ersetzen und dann dasselbe für die Mutationen. Hier haben wir die AddOrder und den UserStatus. Lassen Sie uns beide entfernen. Wir können auch ein Objekt entfernen, während wir hier in die neue Mutationsdatei sind. Lassen Sie uns diese hinzufügen, exportieren const, fügen Sie die equals. Auch das gleiche für die zweite, fügen Sie die Gleichheitswerte in und entfernen Sie auch das Komma. Wenn Sie noch einen kommentierten Code haben, können wir diesen auch entfernen. Dies wird nicht mehr benötigt. Zurück zu unserem Laden. Wir können das importieren. Das waren die Mutationen. Ändern Sie auch den Dateipfad. Also das ist es. Jetzt gibt dies ein „Speichern“ und gehen Sie zu den Projekten. Alles funktioniert immer noch wie gewohnt. Lassen Sie uns den Admin ausprobieren. Alles sieht gut aus. Dies ist also nur eine Möglichkeit, unseren Vuex-Code zu strukturieren. Nun, Sie können bereits sehen, wie das uns mit zunehmender Anwendung von Nutzen sein könnte. Als nächstes werden wir Module abdecken, was eine weitere nützliche Möglichkeit ist, den Code in unserem Vuex Store zu organisieren. 47. So verwendest du Module: Vuex ermöglicht es uns auch, unseren Code in Modulen zu organisieren. Wir entdeckten, unsere Handlungen, Getter, unsere Mutationen in die eigenen Dateien zu trennen , was eine Verbesserung war. Aber wir können die Dinge noch weiter verbessern, indem wir verwandte Funktionen zusammenfassen. Zum Beispiel kann alles, was sich derzeit in unserem Shop befindet, in drei Gruppen unterteilt werden. Es hängt sogar mit unserem Menü, den Bestellungen oder unseren Benutzern zusammen. So können wir unseren Code in diesen kostenlosen Modulen organisieren. Ich werde das im Stil-Ordner tun. Hier können wir einen Modulordner erstellen, um unsere kostenlosen neuen Dateien zu speichern. Dies wird auch JavaScript-Dateien sein. Die erste ist also für die Menüfunktionalität. Noch in den Modulen erstellen wir die orders.js, und schließlich die Benutzer. Stellen Sie sicher, dass diese alle innerhalb der neuen Module Ordner verschachtelt und dann können wir mit unserem Menü beginnen. Innerhalb von hier können wir alle Zustandsgetter, Mutationen und Aktionen hinzufügen, die mit unserem Menü zusammenhängen und diese innerhalb einer Konstante speichern. So können wir den Zustand als Objekte einrichten. Wir können unsere Getter machen, die Mutationen. Dann endlich die Aktionen. Ich werde in dieser Datei beginnen, indem ich unsere Menüpunkte aus Zuständen hinzufüge, die wir derzeit eine nette tall.js haben. Drinnen hat der Staat unsere Menüpunkte, die ein Objekt ist. Suchen wir die schließende geschweifte Klammer. Ich werde alles hier hineinbringen. Verlassen der Aufträge sind und auch der aktuelle Benutzer. Fügen Sie diese darin in unsere menu.js innerhalb unserer Zustandsobjekte ein. Es gab zwei Stücke von Staat in unserem Shop sind mit den Bestellungen und dem Benutzer verbunden. Fügen Sie diese demnächst zum eigenen Modul hinzu. Als nächstes werde ich die get-Menüpunkte greifen, die ein Getter aus unserer Datei guesses.js sind. Lasst uns diese Linie nochmal durchschneiden. Mehr als zwei sind mit den über zwei Modulen verbunden. Wir können einfach den ersten schnappen. Geh runter zu den Getters ist das Gesicht. Diese Funktion ist jetzt auch auf unserem Getters Objekt zwei. Wir müssen dies zu einer Methode zurückgeben, indem wir gleich zu einem Doppelpunkt ändern. Komma kann auch die X-Box entfernen. Wir müssen keine Mutationen hinzufügen, und wir werden später einige Aktionen zu dieser Datei hinzufügen. Wenn x alle diese Konstanten exportieren muss, so können wir sie in unseren Dateien verwenden. Wir haben unsere Zustände, wir haben unsere Getter, Mutationen und Handlungen. So können wir nicht exportieren Standard, ein Objekt, das diese vier Variablen enthält. Also Zustand, Mutationen, Getter, und schließlich die Aktionen. Wie im letzten Video möchte ich Sie ermutigen, die Bestellungen auf den Modulen des Benutzers selbst abzuschließen. Es spielt eine Rolle, wenn Sie die Dinge durcheinander bringen. Ich werde jetzt bis dahin weitergehen. Wir können immer den Code am Ende vergleichen. Denken Sie daran, zwei für jede funktionale Kopie über in unsere Module, wir müssen die Gleichen durch einen Doppelpunkt ersetzen, genau wie wir hier gesehen haben. Gehen wir nun zu den Befehlen. Dieses neue Modul. Wir können eine Konstante von Zuständen schaffen. Wir können unsere Mutationen erstellen, die Getter, die Aktionen, und dann schließlich exportieren Standardwerte von Objekten für diese vier Variablen. Wireless ist leer, nur geändert. Ich werde alle auswählen und kopieren und einfügen Sie dies innerhalb der users.js. Dann können wir anfangen, mit unseren Befehlen zu arbeiten. Zuallererst können wir innerhalb der Zustände jeden Zustand erfassen, der sich auf Bestellungen aus der store.js bezieht. Unsere Aufträge werden als leeres Array initialisiert. Lassen Sie uns das entfernen, das ist Interstates. Wir haben Mutationen oder Mutationen Ordner, die unser Add zur Bestellung ist. Entfernen Sie diese Basis ist gleich, denken Sie daran, die Exporte zu entfernen und setzen Sie dies auch zurück, um einen Doppelpunkt zu sein. Wir haben auch einen Getter, der die Anzahl der Bestellungen ist. Entfernen Sie diese und fügen Sie sie in unser Modul ein. Wir haben momentan keine Aktionen. Also für jetzt können wir diese Datei und auch die Getter speichern. Wir können mit der Arbeit am Modul users.js beginnen. Ganz oben für den Zustand haben wir den aktuellen Benutzer, den Sie von unserem Stand greifen können, der derzeit auf wissen eingestellt ist. Wir können dieses Ende nächsten Schritt für die Mutationen hinzufügen, wir haben den Benutzerstatus. Die mutations.js, greifen Sie alle Inhalte und fügen Sie dies in ein Wandobjekt, entfernen Sie unseren Export, Setup, unseren Doppelpunkt und unten zu unseren Gettern. Es gibt einen Getter, den wir für diese Datei benötigen, und dies ist, um den aktuellen Benutzer aus unserer Datei getters.js zu bekommen. Lassen Sie uns dies entfernen, entfernen Sie unsere Exporte und den Doppelpunkt, und bis zu den Aktionen für die Aktionen im Zusammenhang mit dem Benutzer haben wir die Anmeldemethode. Lasst uns das aus unserer actions.js holen. Wir können auch hier das Abzeichen abholen. Lasst uns beide Phasen darin greifen. Also werde ich Modul wie immer verwenden. Wir können die Exporte an einem Doppelpunkt entfernen. Wir müssen diese beiden auch durch ein Komma trennen. Das gleiche Design in, diese Aktion verwendet auch die Firebase off. Wir müssen dies auch aus unserer Aktionsdatei holen und dies in unser Benutzermodul hinzufügen. Stellen Sie sicher, dass alle unsere Dateien jetzt gespeichert sind. Ich kenne Thom Mayne store.js Datei. Wir müssen jetzt unsere kostenlosen neuen Module importieren. Wir können auch unsere Getter, Mutationen und Handlungen entfernen. Ich werde unser vielseitiges Modul aus dem Dateipfad von./ in den Modulordner und das Menü importieren . Das ist unsere Entscheidung, mehr Male. Dieser ist für die Bestellungen, beide/bestellungen. Dann war der letzte für die Benutzer, scrollen Sie nach unten zu unseren Store-Objekten. Wir können unsere Staaten entfernen. In der Tat können wir hier alles von innen entfernen und diese dann durch unsere Module ersetzen, was ein Objekt ist, aber wir werden in den Menüreihenfolgen und auch die Benutzer übergeben. Auch nur um die Dinge zu bereinigen, werde ich unsere Aktionen, Getter, unsere Mutationsdateien entfernen . Diese brauchen wir nicht mehr innerhalb unserer Projekte. Aber Sie können diese als Referenz benötigen, wenn Sie es vorziehen. In der Tat kann es besser sein, sie für einen nicht verwandten Zustand zu verwenden , der nicht in ein eigenes Modul gehört. Jetzt speichern wir diese Datei und gehen Sie zu unserer Anwendung. Wie viel hat sich der Dateipfad geändert? Ich werde diese Datei verwenden, was nur Änderungen an einem Double../zu den Projekten bedeutet. Lassen Sie uns die Menüpunkte testen, um zu beginnen. Diese alle auf dem Bildschirm angezeigt. Wir können versuchen, sich anzumelden. Der Admin nach unten, wo wir unsere E-Mail und Passwort hinzufügen können. Wir können uns weiterhin anmelden und auch abmelden. Dies scheint alles noch zu funktionieren, aber diesmal mit Modulen. Wir werden auch auf diese Module im nächsten Abschnitt zurückkommen und ihnen hinzufügen wenn wir lernen, wie man die Daten aus einem Store synchron mit Firebase hält. 48. Vuex mit Firebase-Bindung: Ich werde diesen Abschnitt beginnen, indem ich Firebase-Bindungen zu Vuex hinzufüge. Jetzt, da wir Vuex zu unserer Anwendung hinzugefügt haben, haben wir jetzt einen zentralen Ort für alle unsere Daten und unseren Staat. In diesem Abschnitt werden wir auch unsere Vuex-Tür an Firebase binden. Obwohl Vuex ein praktischer zentraler Ort zum Push und Abrufen unserer Daten ist, handelt es sich nicht um einen dauerhaften Datenspeicher. Das bedeutet, wenn wir die App neu laden, gehen alle Änderungen im Store verloren. Um dies zu beheben und sicherzustellen, dass unsere Menüpunkte und Bestellungen dauerhaft gespeichert sind, werde ich den Vuex Store synchron mit Firebase halten. Wir werden dies mit einem Paket namens Vuexfire tun, und dieses Paket wird vom Call VJS Team gepflegt, und es wird ermöglichen, dass unser zentraler Vuex Store mit unseren Firebase-Daten synchron gehalten wird. Es tut dies, indem es unsere Firebase-Datenbank hört und dann Mutationen kommuniziert, um unseren Zustand entsprechend zu ändern. Im Moment, wenn wir in unseren Admin gehen, können wir hier eine neue Pizza hinzufügen. Wir können dies hinzufügen, und wir können sehen, dass dies nicht zu unserem Menü hinzugefügt wird, oder wenn wir zu den Menükomponenten gehen, sehen wir es auch nicht hinzugefügt. Dies liegt daran, wenn wir zu unseren Filialmodulen gehen. Also lasst uns in die menu.js gehen und dann bis zu unserem Zustand. Hier drinnen haben wir nur unsere Dummy-Daten. Also, jetzt wird ein guter Zeitpunkt sein, dies zu entfernen und dies durch ein leeres Array zu ersetzen. Also werde ich alle Inhalte aus unseren Zuständen entfernen, wir können den Namen der Menüelemente belassen, aber dieses Mal werde ich dies auf ein leeres Array setzen. Dies wird in Kürze mit Firebase synchronisiert werden. So werden alle Daten, die wir in unserer Datenbank haben , dann innerhalb des Staates reflektiert. Das bedeutet, dass wir immer noch unseren Get-Menüpunkte-Getter verwenden können , um unseren Zustand zu greifen und ihn zu unseren Komponenten zu schieben. Also jetzt lasst uns das Paket installieren, das wir brauchen, das heißt Vuexfire. Ich werde dies über npm tun, mit dem i-Befehl auf dem Paketnamen ist Vuexfire, und das sollte nur ein paar Augenblicke dauern, um zu installieren. Großartig, mit diesem jetzt können wir überprüfen, dass dies innerhalb der package.json installiert ist, wir können bis zu Abhängigkeiten gehen und erhalten Vuexfire ist hier installiert, und der nächste Schritt ist, unsere Firebase-Mutationen hinzuzufügen. Es wird zum Root-Speicher hinzugefügt und diese in Mutationen müssen wir unseren Zustand jedes Mal mutieren, wenn sich die Daten innerhalb der Firebase ändern. Gehen wir also zu der root store.js innerhalb unseres Stall-Ordners. Ich werde wahrscheinlich reden, wir müssen diese zuerst von Vuexfire importieren. Dies wird Import genannt werden. Also in den geschweiften Klammern, Vuexfire Mutationen, auf der Verpackung ist Vuexfire. Dies wird uns dann erlauben, diese Mutationen in die Wurzel unseres Ladens zu injizieren. So können wir die Mutationen mit dem übereinstimmenden Namen von oben hinzufügen. Jetzt habe ich das, der nächste Schritt besteht darin, unser Handeln zu verbessern. Dies nimmt unsere normalen Aktionen, die wir in unserem Shop haben, und fügen Sie dann einige zusätzliche Parameter hinzu, um unseren Zustand an eine Firebase-Referenz zu binden oder aufzuheben. In unserem Fall haben wir unser Firebase-Menü und die älteste Sammlung kombiniert, und wir werden uns ansehen, wie das jetzt geht. Lassen Sie uns dies wieder im Menümodul einrichten, zuerst müssen wir die Firebase-Aktion importieren, genau wie wir es gerade mit den Firebase-Mutationen ganz oben getan haben. Okay, das heißt Export, also fügen wir dies innerhalb der geschweiften Klammern hinzu, der Name ist Firebase-Aktion. Wieder einmal, aus unserem Vuexfire-Paket, werden wir auch mit unserer Menüreferenz zu tun haben, so dass wir diese auch aus unserer eigenen Firebase-Datei importieren können. Es wird das DB-Menü ref genannt werden. Der Dateipfad ist Punkt, Punkt, Schrägstrich, Punkt, Schrägstrich und der Dateiname von Firebase. Also jetzt in diesem Menümodul haben wir bereits unsere Aktionsobjekte eingerichtet. Hier drinnen werden wir die Feuersturmaktion verwenden, die wir gerade importiert haben, anstatt eine reguläre Aktion zu verwenden. Dies wird unsere Aktion umschließen, damit wir Vuexfire verwenden können, um unsere Daten mit Firebase synchron zu halten, und ich werde dieses neue Aktionsset Menu ref nennen. Wir können dann auf die Fünf-Sterne-Aktion zugreifen, die wir gerade importiert haben, installieren Aktion nimmt auch in unseren Kontextobjekten genauso wie eine regelmäßige Aktion, aber wie wir bereits erwähnt, verbessert es es auch mit einigen neuen Funktionen , um bei der Bindung an Firebase zu helfen. Lassen Sie uns dies als Funktion einrichten. Das erste, was innerhalb unseres Funktionskörpers zu tun ist, besteht darin, den Kontext zurückzugeben und dann auf eine der zusätzlichen Funktionen zuzugreifen , die als bind fire store ref bezeichnet werden. Aber was genau wollen wir an Firebase binden? Wenn wir nach oben scrollen, haben wir bereits innerhalb dieser Datei führen zwei Dinge, die wir binden wollen. Wir haben einen Verweis auf unsere Datenbank, die auf unsere Menü-Sammlung innerhalb unserer Staaten verweist . Unmittelbar unten haben wir unsere lokalen Menüpunkte. Dies sind also die beiden Referenzen, die Sie synchron halten möchten. Wir kombinieren diese zusammen und stellen sicher, dass die Daten exakt identisch sind. Also zuerst, lassen Sie uns in unserem Zustand der Menüpunkte passieren. Und dann wird das zweite Argument unser db Menü ref sein. Wenn wir nun zu unserer Anwendung gehen, die damit bestimmt wurde, wurde diese automatisch vom Texteditor hinzugefügt. Das muss also nur praktikable Aktion sein, zurück zur Anwendung, sehen Sie, dass wir jetzt unsere Menüpunkte verloren haben. Das liegt daran, dass wir eine wichtige Sache vermissen. Wir haben unsere Aktion über im Modul erstellt, aber wir haben sie nicht wirklich gesendet. Diese besondere Aktion ändert nicht unseren Zustand, sondern bindet stattdessen an Firebase. Daher möchten wir es versenden, sobald die Anwendung geladen wird. Ein guter Ort, dies zu tun, wäre innerhalb des erstellten Hook in der Haupt-app.view-Datei. Gehen wir rüber zur app.view und runter zu unserem Skript. Wir können den erzeugten Haken direkt nach unseren Komponenten hinzufügen. Wir versenden dies genau wie bei jeder Aktion, wir können auf diesen Punktstern-Punkt-Versand zugreifen. Das erste, was ist die Übergabe einfacher Aktion, die set menu ref genannt wird. Das zweite Argument ist die Nutzlast, die DB menu ref ist, die auf die Menüsammlung in unserer Datenbank zeigt. Jetzt haben wir die DB-Menü-Referenz aufgenommen, wir müssen dies auch oben in unseren Skripten aus unserer Firebase-Datei importieren, die sich am Punkt Schrägstrich befindet, und dann Firebase. Plötzlich, innerhalb des erstellten Hook, werden wir die Aktion aussenden, sobald die App erstellt wurde. Dadurch wird sichergestellt, dass unser Shop sofort an Firebase gebunden ist. Nun hoffentlich, wenn wir diese Datei speichern und dann zu unserem Projekt gehen, sehen wir jetzt innerhalb des Menüs haben wir unsere Pepperoni Pizza, die jetzt aus unserer Datenbank gezogen wird. Lassen Sie uns zu den Admin-Routen gehen. Wir können überprüfen, dass dies auch hier korrekt angezeigt wird. Wir sehen die Pepperoni Pizza auch hier drin. Lassen Sie uns versuchen, noch einen hinzuzufügen. Wir können dies mit einem Standarddaten hinzufügen. Jetzt sehen die Margarita wurde in unsere Datenbank geschoben und auch in unserer Speisekarte reflektiert. Das ist also wirklich ein guter Fortschritt und etwas, das für unsere Anwendung wirklich wichtig ist. Als nächstes werden wir auch dasselbe mit unseren Bestellungen tun und diese mit Firebase synchronisieren. 49. So synchronisierst du Aufträge mit Firebase: Während wir auf dem Thema sind, unsere Menüpunkte synchron mit Firebase zu halten, können wir das auch mit unseren Bestellungen tun. Um zu beginnen, gehe ich zu der Firebase-Konfigurationsdatei, die eine firebase.js ist. Wir haben bereits einen Datenbankbezug auf unser Menü. Auch für unsere Bestellung müssen wir das Gleiche tun. Ich werde dies duplizieren und die DBBorders-Referenz geändert, die wir auf unsere Bestellsammlung verweisen werden. Denken Sie daran, es ist in Ordnung, dass wir kein Objekt namens Orders noch in der Firebase haben. Das erste Mal, wenn wir eine neue Bestellung schieben, wird sie für uns erstellt. Dann können wir zu den app.vue Komponenten gehen. Dann müssen wir hier auch diese Referenz importieren. Wir haben die Menüreferenz, so dass wir auch unsere neue Bestellreferenz greifen können. dann innerhalb des kreativen Hakens nach unten scrollen, können wir dies duplizieren und dasselbe für unsere Bestellungen tun. Dies wird unsere Bestellreferenz synchron halten, die in nur einem Moment mit unserer Referenz von Firebase erstellt wird. Diese Set-Orders Referenz ist eine Aktion, die wir nicht erstellt haben, also gehen wir über und tun dies jetzt. Dies wird ähnlich wie bei set menu ref, die wir im letzten Video erstellt haben. Lassen Sie uns das von unserer Speisekarte kopieren. Das Menü befindet sich innerhalb der Module. Schnappen Sie sich dies aus den Aktionen und dann können wir zu unserer orders.Js gehen fügen Sie dies als eine Aktion ein, und alles, was wir tun müssen, ist, jede Referenz aus unserem Menü zu ändern, um Bestellungen zu sein. Der Name, die Aufträge ref, das ist einfach Aufträge, das ist der Name unseres Staates gerade oben, gesagt wird , ein leeres Array zu sein. Denken Sie daran, damit dies funktioniert, müssen wir auch unsere Firebase-Aktion und unsere Bestellreferenz importieren. Wir können an den Anfang der Datei über unseren Staaten gehen. Importieren wir zuerst unsere Firestore Aktion aus unserem Paket, das vuexfire ist. Zweitens werden wir unsere dBordersRef importieren, die wir gerade in unserer Firebase-Datei erstellt haben. so.. /Firebase. Genau wie beim Menü wird dies eine Aktion hinzufügen, die unsere Bestellungen bindet, was der Name unseres Staates innerhalb dieses Moduls mit all unseren OrdersRef ist, die auf unsere Sammlung innerhalb von Firebase verweist. Mit diesem jetzt an Ort und Stelle können wir einen Getter direkt unten einrichten , der unsere Bestellungen von Firebase abrufen wird. Ich werde das GetOrders nennen. Dies wird unsere Zustände innerhalb unserer Funktion aufnehmen und dann unseren Staat die Befehle zurückgeben. Sie können beginnen, ein Muster hier zu sehen, da viel von dem, was wir tun, ist genau das gleiche wie wir für die Menüpunkte getan haben. Wir richten eine Bindung zwischen lokal, state und Firebase ein und erstellen dann einen Getter, um diese Daten zu erfassen, die Sie innerhalb unserer Komponenten verwenden können. Wir werden diesen Getter im nächsten Video verwenden, um unsere Bestellungen innerhalb des Admins anzuzeigen. 50. So zeigst du Aufträge im Admin-Bereich an: Wir haben jetzt unsere Firebase-Bindungssätze unserer Aufträge, in denen wir unsere alte Referenz innerhalb unserer Aktionen erstellt haben. Wir haben auch einen Getter erstellt, um unsere Gegenstände aus dem Bundesstaat zu ziehen. Lassen Sie uns jetzt diesen Getter innerhalb der Admin-Komponente verwenden, um die Bestellungen anzuzeigen und auch unseren Warenkorb zu ändern, um neue Bestellungen an Firebase zu übertragen , anstatt direkt auf alle Expo anzeigen. Ich werde damit beginnen, diese Aufträge innerhalb der Menüpunktansicht-Komponenten zu Firebase zu schieben . Unten ganz unten. Innerhalb aller Methoden haben wir AddNewOrder, die derzeit eine neue Mutation namens AddOrder begeht. Innerhalb der Bestellungen ist dies die AddOrder-Mutation und das drängt direkt zu unserem Shop. Ich werde das jetzt kommentieren und an Ort und Stelle, werde ich eine neue Aktion unten am unteren Rand hinzufügen, die stattdessen unsere neuen Bestellungen Firebase schieben wird. Diese Aktion wird AddNeworder genannt, und dies ist verantwortlich für die Übertragung unserer neuen Aufträge auf Firebase. Ich werde dies als asynchron markieren, so dass wir ein Gewicht innerhalb unseres Codes verwenden können. Wir können in jedem Kontext und auch die Reihenfolge übergeben , die die Nutzlast sein wird, die an diese Aktion übergeben wird. Wir können unsere Funktion mit einem try und einem catch Abschnitt für jede Fehlerbehandlung einrichten. den Fehler annehmen, bei Fehlern geben wirbei Fehlerneine Warnung mit der Zeichenfolge „Leider ein Problem bei der Bestellung aufgetreten, bitte versuchen Sie es erneut.“ Die Transaktion wird ziemlich einfach sein, alles, was wir tun müssen, ist auf unsere dBorderReference zuzugreifen und dann die Add-Methode aufrufen, die die Payload der Bestellung schieben wird. Wir werden dies tun, und das ist jetzt unsere Aktion abgeschlossen. Beachten Sie, dass wir innerhalb dieser Aktion keine Mutation begehen, da wir unseren eigenen Shop nicht aktualisieren müssen. Stattdessen wird [unhörbar] das Abrufen unserer Daten aus Firebase verarbeiten, was dann unseren lokalen Zustand zu sehr aktualisiert. Wir können diese Aktion nun aus unseren Menükomponenten aufrufen, wenn Sie eine neue Bestellung aufgeben. Zuallererst werde ich eine neue Konstanten erstellen, die unsere Audit-Daten als Objekt enthalten wird , können wir in AP-Störung übergeben, die die Pizzen sind, die in unserer Bestellung enthalten sind, die wir von diesem Speicherkorb. Im Moment würde dies jedoch zu einem Problem führen, unser Warenkorb ist eine Art von Array innerhalb der Dateneigenschaft. Firebase wird jedoch ein Objekt erwarten, daher müssen wir diesen Korb in eine Art von Objekten konvertieren, indem wir die geschweiften Klammern hinzufügen. Dann können wir die drei Punkte verwenden, die der Spread-Operator ist, und dies wird in den Array-Elementen in unseren Objekten zusammenführen. Außerdem werde ich eine CreateDat-Eigenschaft hinzufügen, die einem neuen JavaScript-Datum entspricht. Was uns erlauben wird, unsere Bestellungen in der Datumsreihenfolge einzuziehen, wir begehen keine Mutation mehr, also werde ich das kommentieren. Ich werde jetzt unsere neue Aktion senden und gehen, um auf diese gespeichert direkt zugreifen, Policies in nur einem Moment lösen, unsere Dispatch anrufen, im Namen unserer Aktion übergeben, die unsere neue Ordnung ist. Dann die Nutzlast, die unser altes Objekt von oben ist. Blättern Sie nach oben. Wir können jetzt unseren Stand an der Spitze unserer Skripte importieren. Aus dem Dateipfad des Punktschrägstrichs werde ich Ordner aufhalten, und dann werde ich Datei anhalten. Über den Browser, können wir nun dies testen, indem wir eine neue Bestellung hinzufügen, so werde ich nur einige pepperonis bestellen Ihre Bestellung. Nun, wenn wir auf die Firebase-Konsole gehen, gibt uns einen Neuladen, sehen wir jetzt unsere älteste Sammlung mit unseren Pizzen, die wir zuvor erstellt haben. Lassen Sie uns noch einmal versuchen, zwei Margherita, das ist jetzt in einer Firebase hinzugefügt worden. Wenn wir jedoch zu den Admin-Komponenten gehen, also forward/admin, scrollen Sie nach unten zu unseren Bestellungen. Wir sehen nur den einzelnen hartcodierten Wert, den wir früher hinzugefügt haben, so dass wir jetzt diese hartcodierten Werte entfernen und diesen dynamisch machen können. Denken Sie daran, in der Bestelldatei [unhörbar], haben wir einen Get-Orders Getter erstellt , den Sie in unseren Bestellungen ziehen können. Jetzt gehen wir zur Admin Dot View und aktualisieren unsere Komponenten. Innerhalb des berechneten Abschnitts haben wir bereits unseren Getter, den wir derzeit zuordnen. Wir können noch einen hinzufügen, das heißt, Bestellungen zu bekommen. Dann können wir in der Vorlage durchlaufen und die Aufträge anzeigen. Lassen Sie uns nach dem Bestellabschnitt suchen. Innerhalb des Tabellenkörpers können wir eine V for-Schleife hinzufügen. Wir werden jedes Element innerhalb der automatischen Variablen speichern, wir werden auch den Index in GetOrders aufzeichnen, wir müssen auch einen dynamischen Schlüssel hinzufügen. Um dies zu kombinieren, greifen Sie den Schlüsselwert aus der Bestellpunkt-ID. Das erste, was wir tun können, ist, die einzelnen Aufträge zu nummerieren, anstatt den hart codierten Wert vorher. Innerhalb der doppelten geschweiften Klammern können wir auf unsere Indexnummer zugreifen, und ich werde den Wert eins hinzufügen. Dies liegt daran, dass Indizes an der Position Null beginnen, wir wollen, dass die erste Ordnung getragen wird, und dann so eine. Jetzt haben wir unsere individuelle Reihenfolge, wir werden jetzt eine zweite V für Schleife in der folgenden Zeile erstellen. Diese Schleife wird für alle Pizzen innerhalb der Bestellung sein, wir können diese innerhalb einer Variablen namens OrderItem speichern. Wir werden unsere Bestellung durchlaufen und alle einzelnen Stücke packen. Wir können dann einen dynamischen Schlüssel für unsere Liste hinzufügen, und der Schlüssel kann OrderItem sein und die ID zuschneiden. Wir können dann das OrderItem verwenden, um unsere hartcodierten Werte für unsere Pizza zu ersetzen. Innerhalb der doppelten geschweiften Klammern können wir auf den OrderItem Punktnamen zugreifen, wir können auf den Preis, die Menge und auch den Preis unten an der Unterseite zugreifen. Ich werde auch das Währungssymbol entfernen, da wir es später auch zu allen Preisen formatieren werden, und dies wird automatisch in vier Zeilen hinzugefügt. Speichern Sie dies, und jetzt können wir zu den Admin-Komponenten gehen, scrollen Sie nach unten und als unsere beiden Bestellungen, die jetzt aus Firebase gezogen werden. Wenn Sie diese Bestellungen auf Ihrem Bildschirm sehen können, haben Sie erfolgreich Bestellungen aus dem zentralen Speicher abgerufen , der mit Firebase synchronisiert wird. Im Moment haben wir zwei Besitzer, aber wir werden noch viel mehr haben. Es gibt keine Garantie dafür, dass, wenn wir in Ordnung speichern oder von Firebase abrufen, es in einer bestimmten Reihenfolge zurückkommen wird. Denken Sie daran, von vorher, als wir unsere Bestellungen Objekte nach unten in AddNeworder erstellt haben, haben wir auch eine erstellte unsere Eigenschaft hinzugefügt, die wir jetzt verwenden können, um in unsere Bestellungen von Firebase in ordentlicher Reihenfolge zu ziehen. Wir können dies über alle Bestellungen Punkt JS innerhalb unserer Aktion tun, wo wir die fünf Store-Referenz setzen. Wir greifen auf unsere dBorderReference zu und sehen, wo wir auch die OrderByMethod hinzufügen können, die von Firebase zur Verfügung gestellt wird, indem wir eine Zeichenfolge übergeben. Die Zeichenfolge wird der Name der Felder sein, die wir immer kaufen wollen, dies wird erstellt, dass. Wenn wir das jetzt speichern und zum Browser gehen, sehen wir immer noch unsere beiden Bestellungen von Pepperoni und dann unsere Margherita, die in aufsteigender Reihenfolge sind. Wenn wir in absteigender Reihenfolge umkehren wollen, können wir auch eine zweite Argumente übergeben, die durch ein Komma des ESC getrenn