Wie man verschachtelte Requisiten in VueJS organisiert?

Question

Ich habe diese seltsame Organisation/Architektur Gurke ich kann nicht scheinen, herauszufinden.

Sagen, ich habe drei Komponenten, A -> B -> C, wobei A ein Großelternteil ist, ist B ein Elternteil, und C ist ein Kind.

A passiert eine Reihe von Objekten B. B der Anordnung Schleifen durch jedes Objekt auf Instanzen von C. Weitergabe einige dieser Objekte nicht garantiert werden, zu ändern, während andere ändern können.

C erfordert zwei Felder in dem Objekt vorhanden ist, und sagen object.name object.icon. Dies würde in C's Requisiten spezifiziert werden.

Meine Beilage ist, dass ein Entwickler, der Komponente A verwendet, auf Cs Requisiten schauen muss, um zu wissen, welche Eigenschaften in den Objekten an B bereitgestellt werden. Dieses Problem wird nur schlimmer, wenn ich mehr Komponenten zwischen A und C hinzufüge .

Wie ich diese strukturieren? Ich dachte, vielleicht würde hier ein Geschäft kommen, aber ich dachte immer, dass die Geschäfte für die Aufrechterhaltung des Staates sind, der sich ändern kann. Und einige der Objekte, die A zur Verfügung stellt, werden sich garantiert nie ändern.

Answer 1

Ich persönlich würde einen gemeinsamen Staat unter Komponenten verwenden, oder wie Sie gesagt haben, ein Geschäft. Speicher sind besonders nützlich, wenn Sie einige Daten zwischen den Komponenten verwalten möchten. Wenn sie sich ändern, werden sie in allen anderen Komponenten aktualisiert.

Einfaches Beispiel:

var sourceOfTruth = { 
    propThatChanges: {}, 
    immutable: {} 
} 

var vmA = new Vue({ 
    data: sourceOfTruth.propThatChanges 
}) 

var vmB = new Vue({ 
    data: sourceOfTruth.propThatChanges 
}) 

Nun, wenn sourceOfTruth.propThatChanges mutiert ist, sowohl vmA und vmB werden ihre Ansichten automatisch aktualisiert. Bei Objekten, die sich garantiert nicht ändern, können Sie sie einfach nicht an die C-Komponenten übergeben, wie zB sourceOfTruth.immutable. Oder Sie könnten ein ganzes neues Store-Objekt zur Verfügung zu A erstellen, aber nicht B oder C

Mehr Info gibt es die die Vue docs, sollten Sie sie überprüfen: http://vuejs.org/guide/application.html#State-Management