同じビュー内のコンポーネント間の状態共有に最適な方法

Question

私は、3つのコンポーネント、<project-item>、<project-list>および<project-view>を含むプロジェクトビューを持っています。これらのコンポーネントはすべて、選択したプロジェクトを認識する必要があります。

• <project-item>は、特定のプロジェクトの状態を保持します。このコンポーネントには、プロジェクトが選択されているかどうかを判断するselectedというプロパティがあります。
• <project-list>には、1つまたは複数のプロジェクトアイテムが格納されており、子タイプが<project-item>であり、選択されているアイテムをチェックする計算プロパティがあります。
• <project-view>は、ナビゲーションとロジックに関連付けられたUACを含む一般的なビューです。

階層は、私はそれがグローバルな状態ではありませんようvuexがここに間違った選択であると感じて、その状態を共有する最良の方法だろう

<project-view> 
    <project-list> 
     <project-item selected></project-item> 
    </project-list> 
</project-view> 

何...このようになります。

また、<project-view>コンポーネントの計算されたプロパティを使用して、<project-list>コンポーネントで選択されたアイテムを取得しようとしましたが、存在し、スコープ内にあるにもかかわらずエラーが発生します。

Answer 1

Vuexはあなたの答えです。 https://vuex.vuejs.org/en/intro.html

これは、状態を共有するためのソリューションです。

ストアを作成し、状態をストアに接続し、アクション/突然変異を使用して作業します。

これは、必要に応じて簡単にスケールアップできる状態共有のための優れた基盤を提供します。

幸運を祈る！

Answer 2

あなたはVuexが過剰であると思われる場合は、ここに私の答えをチェック - かなり同じトピックを

VueJS access child component's data from parent