親オブジェクトがあって、その子にコンポーネント由来の Vueオブジェクトを動的に追加したりする。

Vue.js だけの概念では辛い。

コンポーネントはテンプレートにタグで埋め込んで、それにより Vue オブジェクトが生成されて画面が描画されるが、 じゃあ最初に書いてあるテンプレートよりも要素が増えたり減ったりする場合はどうすりゃいいのか？という話。

よくある、リストに追加みたいなボタンを押す度に行が増えるみたいなやつである。

結論からいうと、Vue にコンポーネントを追加という概念が無い。

Vue の考え方として、data が正で、画面に構築されている結果は data の反映ということになる。 つまり data さえ有ればゼロからいつでも画面状態を再現できるということである。 画面の今の状態なんか知らんでいい。なので、今ある DOM に何か追加するみたいな概念は無い。

画面のコンポーネントというモノがデータバインディングされて一切の情報を保持していないという設計にする必要がある。

そうなれば実装としては、コンポーネントの元ネタになるデータ自体を増やせばいいということになる。 データが増えれば対象となるコンポーネント由来の Vue オブジェクトも勝手に増えるという考え方である。

何かの行が増えていくということは、その行たちはテンプレート上では v-for で構築されていて、その v-for で指定されているデータは配列であるのである。なので配列を増やせば、データバインディング機能により指定のコンポーネント由来の機能で勝手に増えるけど・・・・・・

確かに増えるけど、その状態のデータって親が管理しないといけないんじゃないの・・・ 確かに親子間で値のやり取りはできるけど、じゃあ孫はどうする。子がデータを親が管理していて子には無いのだから、じゃあ、孫のデータも親が管理しないといけないということになりますな。

そして、その間を props と v-bind で複雑に繋ぐ必要が出てきますね・・・

コンポーネント生成時に親が持つデータを動的に子のdataとして採用して双方向バインディングが簡単にできなかったら、これ辛くない？それが孫まで行くともっと辛くない？

Vue.js のこういう辛さを解決する設計を取り入れているのが Vuex という話のようだ。

Vuex の考えは単純でグローバルに1個だけ用意するからお前ら勝手に自分の該当するデータ読めということだ。