VueJSでネストされた小道具を整理する方法は？

Question

私はこの奇妙な組織/アーキテクチャのピクルスを持っています。私は理解できないようです。

私は、A - > B - > Cの3つのコンポーネントがあります。ここでAは祖父母、Bは親、Cは子です。

AはB. Bへのオブジェクトの配列を渡すは、Cのインスタンスに各オブジェクトを渡す配列をループ 他の人が変更される可能性がありながら、これらのオブジェクトのいくつかは、変更しないことが保証されます。

Cでは、オブジェクトに存在する2つのフィールド、たとえばobject.nameとobject.iconが必要です。これはCの小道具で指定されます。

私のpickleは、コンポーネントAを使用している開発者は、オブジェクトをBに提供するプロパティを知るためにCの小道具を見なければならないということです。この問題は、AとCの間にコンポーネントを追加すると悪化します。

これはどのように構成しますか？ これは店舗が来る場所だと思っていたかもしれませんが、私はいつも店舗は変わる可能性のある状態を維持するためのものだと思っていました。また、Aが提供するオブジェクトの一部は決して変更されないことが保証されています。

Answer 1

個人的には、コンポーネント間、またはあなたが言ったように、ストアを共有状態で使用します。ストアは、コンポーネント間でいくつかのデータを維持する必要がある場合に特に便利です。また、これらのストアで変更された場合は、他のすべてのコンポーネントで更新されます。

簡単な例：sourceOfTruth.propThatChangesが変異されるたびに

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

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

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

は今、vmAとvmBの両方が自動的にビューを更新します。変更されないことが保証されているオブジェクトの場合は、単にsourceOfTruth.immutableのようにCコンポーネントに渡すことはできません。それとも、Aが利用可能な全体の新しいストア・オブジェクトを作成することもできますが、

BまたはCではない詳細情報Vueのドキュメントがあり、あなたはそれをチェックアウトする必要があります： http://vuejs.org/guide/application.html#State-Management