爲何咱們須要 Vuex

1、一個錯誤引起的思考

在 Weex 子組件中經過 this.$parent.$emit('event') 觸發父組件的事件，父組件經過 this.$on('event', handler) 接收事件，從而實現父子組件的通訊。這在 Native 端表現正常，然而當使用 Vue-loader 編譯代碼，引入 vue-runtime 和 weex-vue-render 在瀏覽器端運行的時候，事件沒法正常捕獲，這是什麼緣由呢？

假設把前文所說的父組件命名爲 father, 子組件命名爲 child，起初, Weex 中:

child.$parent === father // true複製代碼

咱們爲了通知 father 去作某件事情，能夠在 child 中使用 this.$parent.$emit，但是當解析到瀏覽器執行的時候，Debugger 發現：

child.$parent === father // false
    child.$parent.$parent === father // false複製代碼

也就是在 father 和 child 之間，多了一層組件的封裝，以前的父子關係發生了改變，事件天然沒法正常傳達

這是由於，在 Weex 中有不少內建組件，底層基於 Native 端實現，當經過 vue-runtime 在瀏覽器運行的時候，須要將這些內建組件用基於瀏覽器的 Vue 組件代替，而這些 Vue 組件要實現相似底層 Native 組件的效果，極有可能須要封裝多層，也就是會出現上述的父子關係變動的狀況

能夠認爲是 Weex 作得很差的地方，可是我覺着，就算沒有這個錯誤，也應該避免使用
this.$parent

2、this.$parent 背離了組件解耦的原則

上述的組件通訊方式，是從哪來的奇淫巧技，我都已忘記，目前在 Vue 官網上找不到這種使用方法，也就是連官方都不推薦了更印證了不該該使用 this.$parent 的說法。

其實緣由也很簡單，子組件引用父組件的實例，這種強關聯背離了組件的解耦原則，子組件依賴於某一特定的父組件，那麼這個子組件只適用在這個父組件下，把這個子組件放到別處，就沒法正常運行（或者有功能的缺失），而且一旦出現章節一中父子關係變動的狀況，結果更加難以預料

那麼子父組件確實是須要通訊的時候，不使用 this.$parent 有什麼替代方案麼？答案是有的，Vue 中有個 bus 總線，子組件經過 bus.$emit把事件發到總線中，任何組件均可以監聽這個事件。也就是子組件只負責觸發事件，並不須要關心具體的處理組件。總線接收到事件信號後，發送到監聽了該事件的組件處理

對於父到子的通訊，父組件經過 props 向子組件傳入參數，對於這個方向的數據流，咱們卻不用太擔憂的解耦的問題，由於父組件做爲調用方只須要傳遞子組件須要的參數便可，子組件只須要關心參數，並不須要關心是誰在調用，一樣能夠順利移植，完成解耦

從這個層面來講，從某種意義上說，單向數據流促進了組件間的解耦

3、這一樣能夠解釋爲何咱們須要 Vuex

以這個角度來觀察 Vuex 以及全部單向數據流狀態控制框架，是否是某種意義上的事件總線呢？

bus.png

store.png

其實 Vuex 不過是 Bus 更高級細緻的實現而已，連官方文檔也說了，有必要好好思考下你是否真的須要 Vuex，若是你的應用自己不復雜，其實只須要一個簡單的 Bus 就夠了

公衆號：菲麥前端