爲何要使用狀態管理

咱們平時開發的大部分項目，因爲複雜度不夠， 不多使用 Vuex、Redux 等狀態管理庫，就算引入了 Vuex 這些庫，也只是看成一個全局數據引用，並不是對應用狀態進行管理。

但一旦頁面的複雜度比較高，必然要引入狀態管理，今天就聊聊我理解中的狀態管理。

若是涉及到舉例，因爲我對Vuex更熟悉，團隊內也大多比較熟悉Vue，所以會使用Vuex做例子。

到底何時應該使用狀態管理

舉例幾個須要用 Vuex 的例子:

例子一

// Page.vue
<page>
  <component-a />
  <component-b />
</page>

// ComponentA.vue
<div>
  <component-a-child />
</div>

好比這個例子中，<component-a-child />想和<component-b />通訊，使用事件傳遞來解決很是麻煩。

固然也可使用 EventBus，加一個全局的 vue 實例解決，但用 EventBus 還須要去關心事件的綁定解綁，須要手動處理事件，當這類組件，就會變得很是麻煩。

最好的解決辦法就是抽象出通用的組件狀態，放到 state 裏面，接着經過 action/mutation 改變通用狀態，而須要這些狀態的組件則本身調用(mapState/mapGetter)，不須要去關注組件之間的關係。

例子二

// Page.vue
<page>
<topic-list
  :list="list"
  :activity="activity"
  :user="user" />
</page>

// TopicList.vue
<div>
  <topic-header :list="list" :activity="activity" :user="user" />
  <template v-for="item in list">
    <topic :list="list" :data="item" :activity="activity" :user="user" />
  </template>
</divt

這個例子裏:list="list" :activity="activity" :user="user"在被不斷的傳遞，實際裏面的組件可能只須要裏面的一兩個屬性。

固然，例子裏面的代碼比較簡單，也能夠經過合理的組件設計來解決。

但一旦碰到這種某幾個狀態數據不斷被其子組件以及後代組件使用的情況，能夠考慮使用狀態管理來解耦，可能使代碼更加簡潔。

狀態管理解決了什麼

• 最主要是解耦，把組件與組件之間的複雜關係解耦爲數據與數據的關係，組件僅做單純的數據渲染，並且因爲是單一數據源，總體上很是便於維護。

之前是：

如今是：

• 因爲單一數據源+數據不可變，帶來了應用狀態的快照，能夠很方便的實現前進/後退以及歷史記錄管理。
• 可測試性，能夠分別針對視圖和數據進行測試，而不是混淆在一塊兒，致使測試難度極大。

狀態管理帶來的新問題

最主要是因爲解決使得單個組件複雜度的提高，但相比總體複雜度的下降以及更高的可維護性，這點代價是徹底值得。