菜菜菜的 Vue 30天 - Day25

在前面我們有介紹了 props 以及 $emit 來做子父層組件間的傳值，這時我們再來拿前面章節有使用到的這張圖來說：

如果我們想要從第三層最左邊的 component 傳值到第三層最右邊的那個 component 想一下該怎麼做呢？！

如果利用 props 及 $emit 來執行的話，我們必須先使用 $emit 往上傳 2 層到最父層的 component 在使用 props 傳 2 次傳到我們的目標 component。

這還只是傳一個資料就這麼麻煩了，如果專案結構越來越大，需要跨組件傳值的資料越來越多，這樣子我們的資料流就很難維護。

這時候我們就需要一些工具來協助我們管理資料流。

Vuex

2014 年 F8 開發者大會，FB 提出了 Flux 單向資料流的概念，更明確的定義了單向資料流中各角色職責及互動方式，提高了可維護性。


Vuex 就是建立在 Flux 的單向資料流的架構上，並依照 Vue 的特性開發出的單向資料流的工具。

而 Vuex 的資料流架構如下：

透過 Vuex 我們就能框架組建間的資料統一管理。

下一章會開始詳細介紹 Vuex 的詳細用法～