2017-09-26 6 views
0

Ich stehe vor einem dummen Problem. In einer Web-App (mein Stapel ist Vue + Vuex + Vue-Router) Ich bin total nicht in der Lage, meinen Geschäftszustand mit der Seite zu synchronisieren, die der Benutzer ansieht.Arbeiten mit html5 Geschichte API und Vue

Wenn ein Benutzer die Zurück- oder Vorwärts-Taste auslöst, löst er das gleiche onpopstate Ereignis aus, das absolut keine Information über "Richtung" oder die Seitenzahl gibt. Nur das Array key in dem Statusobjekt scheint kaum zu funktionieren (es wird gespeichert, wenn man zu neuen Orten geht und dann raten, wo der Benutzer auf Popstate gegangen ist), aber ich weiß nicht einmal, wo die "Tür" für "den Schlüssel" steht.

Also dachte ich über die manuelle Verfolgung der Geschichte Zustand Schlüssel und raten, wo der Benutzer gewesen ist, aber ich denke, es wäre nicht kompatibel, und es ist auch schwerer Code zu heben.

Hier ist meine Frage: Fehle ich einige Schlüsselelement in der HTML5-API, wie könnte ich tun (und Code/Logik minimalistisch halten)?

Vielen Dank im Voraus!

EDIT: umbenannt den Titel und hinzugefügt info

EDIT2: vuex-Router-sync ist ungeeignet, da sie nur Weg Informationen über vuex Seite bietet und nicht wirklich Sync-Router Zustand und zu speichern Zustand ... zu schlecht

PS: bitte nicht c/p Definitionen, sorgfältig lesen, denken

Antwort

1

onpopstate den Zustand Objekt in event.state stellt den jeweiligen Platz in der Geschichte der Anwendung zu korrelieren.

Schreiben Sie Ihre Anwendung so, dass das Bereitstellen dieses Statusobjekts den gesamten Status Ihrer Anwendung unabhängig von der Zeit umfasst. Ich empfehle Ihnen, lesen Sie über State pattern, und zu verstehen, was "Zustand" bedeutet, z.

die besondere Bedingung, dass sich jemand oder etwas zu einer bestimmten Zeit befindet.

Die Implikation ich mache ist, dass Sie nicht die relative Position in der Geschichte wissen müssen Ihre Anwendung in ist, weil event.state alle Anforderungen Ihrer Anwendung sein sollte, um zu bestimmen, was zu machen.

+0

Ich weiß, was Staat bedeutet und es ist beleidigend, nur c/p die Definition, aber es ist in Ordnung. Ja, offensichtlich dachte ich über die Verwendung von Zustand als ... ein Zustand, aber ich möchte minimale Code/Logik mit Vue arbeiten, da ich volle Vue-Stack verwenden und der Zustand meiner App wird von meinem Speicher wie in meiner Frage behandelt. Auch haben Sie vielleicht meine Frage falsch gelesen, ich brauche nicht zu wissen, wo der Benutzer ist, nur ** wie weit er ** und ** in welche Richtung ging **. Das nächste Mal nimm dir mehr Zeit um dich zu fragen "habe ich die Frage wirklich verstanden", "was sind die Implikationen der Frage", "kann ich darauf antworten". Danke. – rmNyro

+0

Ich habe die Frage nicht falsch verstanden, und es gab keine Absicht zu beleidigen. Dies scheint eher ein konzeptuelles Problem zu sein, mit dem Sie konfrontiert sind, und da Ihre Frage war: "Wie würden Sie es tun?" Ich dachte, ich würde dir einen Überblick geben, wie du von "Staat" denken solltest. Wenn Sie 'history.pushState()' oder 'history.replaceState()' aufrufen, sollten Sie ein Objekt übergeben, das den Status in Ihrem Geschäft entweder referenziert oder vollständig ersetzt, so dass die Synchronisierung nur eine Suche ist und nicht irgendeine Art Berechnung basierend auf "wie weit in welche Richtung".Stateful Anwendungen sollten sich nicht um den Begriff "Zeit" kümmern. –