多くの人が、コンポーネントを直接再利用できるようにするために、コンポーネント内で直接vue状態にアクセスするのではなく、小道具を介してコンポーネントに渡すようにアドバイスしています。vue＆vuex getter vs props経由で状態を渡す
しかし、これを一貫して実行すると、ルートコンポーネントだけがストアと通信し、最終コンポーネントを取得するためにすべてのデータをネストされた階層に渡す必要があることを意味します。これは簡単に混乱を招くようです：
Dashboard
Profile
Billing
History
CreditCards
CreditCard
ユーザークレジットカードのデータをどのように読み込みますか？ダッシュボードでそれをツリーの下まで通す？
それはあなたが正しい、混乱の原因となります。これは、vuexが解決する問題の1つです。
どのようにして小道具を渡すのか、それともvuexを使うのかを決めるのですか？私がvuexを使うと言うと、それはそれを必要とするコンポーネントから直接ストアデータにアクセスすることを意味します。このトリックは、データの各部分とアプリケーション全体との関係を検討することです。
vuexを使用する理想的なケースでは、ページ全体、多数のDOM階層、異なるページなどで繰り返し使用されるデータです。
一方、一部のコンポーネントは非常に緊密に結合されており、通過する小道具が明らかな解決策です。たとえば、直接子供がlistコンポーネントのlist-containerコンポーネントがあり、両方に同じリストデータが必要です。この状況では、リストデータを小道具のlistコンポーネントに渡します。
あなたは、インスタンスのプロパティそれはオプションinheritAttrs兄弟だと一緒に$attrs
https://vuejs.org/v2/api/#vm-attrs
に興味があるかもしれません。これら2を用い
https://vuejs.org/v2/api/#inheritAttrs
組み合わせて使用すると、より少ない定型コードで複数の成分レベルを小道具をダウン渡すことができます。
すべてのコンポーネントは、階層の位置に関係なく、ストアと通信できます。すべてのコンポーネントの内部
、あなたは、あなたが、actionsを派遣mutationsを介してデータをコミットまたはルート・インスタンスに格納するオプションを提供することによりgetters
Read the documentation for further details:
を介してデータを読み取ることができるオブジェクト
this.$storeにアクセスしてきましたストアは がルートのすべての子コンポーネントに注入され、 が$ storeとして利用可能になります。
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count() {
return this.$store.state.count
}
}
}