Vuejs: shared states zwischen Komponenten

Question

Ich würde gerne die Best Practice für die Implementierung gemeinsamer Zustände zwischen Komponenten in Vuejs wissen.

Stellen Sie sich vor A: Sie haben eine Web-App, die ein Modal anzeigt. Das Modal hat den booleschen Zustand show. Dieser Zustand sollte sich ändern, wenn auf die modale OK-Schaltfläche geklickt wird, aber auch, wenn auf einen Teil des Hintergrunds geklickt wird, und vielleicht sogar auf eine geänderte Serverzustandsänderung. Daher sollte das Modal in der Lage sein, den Zustand zu ändern, wie es die Eltern-App tun sollte.

Situation B: Sie haben eine Web-App, die Eingabefelder innerhalb verschiedener Komponenten anzeigt, die sich gemeinsame Daten teilen value. Wenn der Benutzer value durch das Feld in einer Komponente ändert, sollte es auch in der anderen Komponente aktualisieren. Auch hier sollten beide auf einem Server-Push-Event updaten.

Fragen:

• Ich bin richtig, dass der richtige Weg, um dies zu realisieren wäre vuex zu verwenden und den gemeinsamen Staat ein Geschäft machen sich die durch und verändert durch emittierten Aktionen von allen Komponenten beobachtet wird/Eltern, die diesen Wert ändern müssen?

• Führt das nicht zu dieser gefährlichen (da schwer zu handhabenden) magischen Reaktivität, die wir aus Meteor kennen?

• Wie dokumentiert man am besten den Fluss, was hängt davon ab?

Answer 1

A: Für eine modale Komponente, ich würde sagen, dass show eine Stütze sein sollte. So kann die Elternkomponente das Modal steuern, was auch immer es will. In diesem Fall gibt es keinen gemeinsamen Status.

Das Modal selbst muss nichts über den Server wissen. Wenn die Stütze showtrue ist, zeigen Sie einfach das modale an und umgekehrt.

Ich denke, die Maskenebene ist ein Teil des Modal, also, wenn die Maske angeklickt wird, emittiert das Modal ein Ereignis. Die übergeordnete Komponente empfängt das Ereignis und kann entscheiden, ob das modale oder nicht gelöscht werden soll.

Vue hat ein offizielles modal Beispiel hier (danke @craig_h für die Erwähnung): https://vuejs.org/v2/examples/modal.html

---

B: Gerade binden den vuex Zustand an den Eingängen. Nichts Falsches.

---

Beachten Sie, dass nicht alle Komponenten direkt auf den vuex-Speicher zugreifen müssen. Verwenden Sie für einige reine UI-Komponenten nur Requisiten. Daher haben die übergeordneten Komponenten das Recht, sie zu kontrollieren und die Flexibilität zu erhöhen.

Ich empfehle Ihnen, diese Dokumente zu lesen:

• https://facebook.github.io/react/docs/lifting-state-up.html
• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.j7ry4a3as
• http://redux.js.org/docs/basics/UsageWithReact.html

Ja diese Reaktion/Redux docs. Da Vue relativ jung ist, hat react community mehr Dokumentation/Artikel. Aber sowohl Vue als auch React sind komponentenbasierte Bibliotheken. Die Idee, wie Sie eine Komponente entwerfen, ist im Grunde die gleiche.

Sie können auch einen Blick auf dieses vuex Beispiel nehmen: https://github.com/vuejs/vuex/tree/dev/examples/chat

Dies ist ein sehr einfaches Beispiel, aber es tut all die Dinge, verwende ich oben erwähnt. Ein Ereignis, einige reine UI-Komponenten zu emittieren ...