web-dev-qa-db-ja.com

vue＆vuexゲッターvs小道具を介して状態を渡す

再利用可能にするために、コンポーネント内でvue状態に直接アクセスするのではなく、propsを介してコンポーネントに状態を渡すことを勧めている多くの人々を見てきました。

ただし、これを一貫して行うと、ルートのルートコンポーネントのみがストアと通信し、最終コンポーネントを取得するためにすべてのデータをネストされた階層に渡す必要があることを意味します。これは簡単に混乱を引き起こすようです：

Dashboard
   Profile
   Billing
      History
      CreditCards
         CreditCard

ユーザーのクレジットカードのデータをどのようにロードしますか？ダッシュボードで、ツリーの一番下まで渡しますか？

vue.jsvuex
18
Chris

それは混乱を引き起こすでしょう、あなたは正しいです。これは、vuexが解決する問題の1つです。

では、小道具を渡すか、vuexを使用するかをどのように決定しますか？ 「vuexを使用する」とは、それを必要とするコンポーネントからストアデータに直接アクセスすることを意味します。重要なのは、アプリケーション全体に対する各データの関係を検討することです。

ページ全体で繰り返し使用されるデータ、多くのDOM階層、さまざまなページなどで、vuexを使用する理想的なケースです。

一方、一部のコンポーネントは非常に緊密に結合されているため、小道具を渡すことが明らかな解決策です。たとえば、list-containerコンポーネント。その直接の子はlistコンポーネントであり、両方に同じリストデータが必要です。この状況では、リストデータをlistコンポーネントにプロップとして渡します。

インスタンスプロパティ$attrs

https://vuejs.org/v2/api/#vm-attrs

兄弟オプションinheritAttrsとともに。

https://vuejs.org/v2/api/#inheritAttrs

これら2つを組み合わせて使用​​すると、ボイラープレートコードを減らして、複数のコンポーネントレベルにプロップを渡すことができます。

22
Eric Guan

すべてのコンポーネントは、階層の位置に関係なく、ストアと通信できます。

すべてのコンポーネント内で、オブジェクトthis.$storeにアクセスできるため、actionsをディスパッチしたり、mutationsを介してデータをコミットしたり、gettersを介してデータを読み取ったりできます。

詳細についてはドキュメントをご覧ください：

ルートインスタンスにストアオプションを提供することにより、ストアはルートのすべての子コンポーネントに挿入され、this。$ storeとしてそれらで利用できるようになります。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
0
LiranC