Vuejs：コンポーネント間の共有状態

Question

Vuejsのコンポーネント間で共有状態を実装するためのベストプラクティスを知りたいと思います。

状況を想像してみてください。あなたにはモーダルを示すウェブアプリがあります。モーダルのブール値はshowです。この状態は、モーダルOKボタンがクリックされた場合に変更されますが、バックグラウンドの一部がクリックされた場合や、一部のサーバープッシュ状態の変更であっても変更されます。したがって、モーダルは、親アプリのように状態を変更できる必要があります。

状況B：一般的なデータを共有する異なるコンポーネント内に入力フィールドを表示するウェブアプリvalueがあります。ユーザーがあるコンポーネントのフィールドを介してvalueを変更した場合は、もう一方のコンポーネントでも更新する必要があります。再度、両方ともサーバープッシュイベントで更新する必要があります。

質問：私は

• 右これについて移動する正しい方法はvuexを使用して、共有状態にすべてのコンポーネントによってによって観察し、放出されたアクションによって変更された店舗の場を作ることであろうということ/その値を変更する必要がある親ですか？

• 私たちが知っているこのような危険な（扱いにくい）反応性を紹介していないのですか？Meteor？

• どのようにフローを文書化するのですか、何に依存しますか？

Answer 1

：モーダルコンポーネントの場合、私はshowは小道具であることを言うと思います。したがって、親コンポーネントは、必要に応じてモーダルを制御できます。この場合、共有状態はまったくありません。

モーダル自体は、サーバーについて何も知る必要はありません。小道具showがtrueの場合は、モーダルを表示し、その逆も同様です。

私はマスクレイヤーがモーダルの一部だと思うので、マスクをクリックすると、モーダルがイベントを出します。親コンポーネントはイベントを受け取り、モーダルを隠すかどうかを決定することができます。 https://vuejs.org/v2/examples/modal.html

---

B：

Vueがここに公式のモーダル例を（おかげで言及のため@craig_h）があるだけで入力にvuex状態をバインドします。何も間違っていません。

---

すべてのコンポーネントがvuexストアに直接アクセスする必要はないことに注意してください。いくつかの純粋なUIコンポーネントでは、単に小道具を使用してください。したがって、親コンポーネントには、それらを制御し、柔軟性を高める権利があります。

私は、これらのドキュメントを読んですることをお勧めいたします：

• 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

はいこれらは/ Reduxのドキュメントに反応しています。 Vueは比較的若いので、反応コミュニティにはより多くのドキュメンテーション/記事があります。しかし、VueとReactの両方はコンポーネントベースのライブラリです。コンポーネントの設計方法は基本的に同じです。 https://github.com/vuejs/vuex/tree/dev/examples/chat

これは非常に単純な例ですが、それは私は上記のすべてのものを使用して行います。

また、このvuex例を見てみることができます。イベントを送信する、いくつかの純粋なUIコンポーネント...