隨著前端的專案的越來越複雜，出現了一堆概念來降低開發的複雜性。單向資料流就是其中一個。

如果專案很簡單，不需要用單向資料流。

單向資料流是什麼

單向資料流指只能從一個方向來修改狀態。下圖是單向資料流的極簡示意：

單向資料流的極簡示意

與單向資料流對對應的是雙向資料流（也叫雙向繫結）。在雙向資料流中，Model（可以理解為狀態的集合） 中可以修改自己或其他Model的狀態， 使用者的操作（如在輸入框中輸入內容）也可以修改狀態。這使改變一個狀態有可能會觸發一連串的狀態的變化，最後很難預測最終的狀態是什麼樣的。使得程式碼變得很難除錯。如下圖所示：

與雙向資料流比，在單向資料流中，當你需要修改狀態，完全重新開始走一個修改的流程。這限制了狀態修改的方式，讓狀態變得可預測，容易除錯。

單向資料流的使用場景

多個元件會共享狀態時，共享狀態和元件間（兄弟元件）通訊變的不容易。我們把共享狀態抽取出來，用單向資料流的方式會變得容易。

Vuex 簡介

Vuex 是適用於 Vue.js 應用的狀態管理庫，為應用中的所有元件提供集中式的狀態儲存與操作，保證了所有狀態以可預測的方式進行修改。

Vuex 是單向資料流的一種實現。

核心概念

State

State 用來存狀態。在根例項中註冊了store 後，用 this.$store.state 來訪問。

Getters

Getters 從 state 上派生出來的狀態。可以理解為基於 State 的計算屬性。很多時候，不需要 Getters，直接用 State 即可。

Mutations

Mutations 用來改變狀態。需要注意的是，Mutations 裡的修改狀態的操作必須是同步的。在根例項中註冊了 store 後， 可以用 this.$store.commit('xxx', data) 來通知 Mutations 來改狀態。

Actions

Actions 通過呼叫 Mutations 來改狀態。Actions 可以包含非同步操作。在根例項中註冊了 store 後， 可以用 this.$store.dispatch('xxx', data) 來存觸發 Action。

Vuex 的完整流程

元件中觸發 Action，Action 提交 Mutations，Mutations 修改 State。 元件根據 State 或 Getters 來渲染頁面。具體如下圖

最後，推薦下 Vue 的官方除錯工具 devtools extension，它提供了 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。下圖是 time-travel 功能的 Demo：

作者：九彩拼盤
連結：https://www.jianshu.com/p/2fa10b29488d
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。