参考コード

以下のような構造のアプリケーションの場合、AppMain の data である appNumber を AppHeader や AppFooter で参照するのは難しい。なぜなら data を props として下に渡していくことはできるのだが、AppMain, AppHeader, AppFooter は同階層にあるためそれが出来ないからだ。

では data を App.vue に持たせればいいのだろうか。つまり全ての data を一番上に集めればいいのだろうか。そうするとあまりに全てが一箇所に集中し、管理が難しくなる。また、バケツリレー的にいくつものコンポーネントを通り抜けていかなくてはならない。

こういう状況における解決策の一つが Vuex だ。もちろん万能ではないが、選択肢の第一のものである。

Vuex の store でこれらの状態を「一元的」に、「ある秩序に基づいて」運用することによって、このような困難さと戦うことができる。