隨著前端的項(xiàng)目的越來(lái)越復(fù)雜，出現(xiàn)了一堆概念來(lái)降低開(kāi)發(fā)的復(fù)雜性。單向數(shù)據(jù)流就是其中一個(gè)。

如果項(xiàng)目很簡(jiǎn)單，不需要用單向數(shù)據(jù)流。

單向數(shù)據(jù)流是什么

單向數(shù)據(jù)流指只能從一個(gè)方向來(lái)修改狀態(tài)。下圖是單向數(shù)據(jù)流的極簡(jiǎn)示意：

image.png

與單向數(shù)據(jù)流對(duì)對(duì)應(yīng)的是雙向數(shù)據(jù)流（也叫雙向綁定）。在雙向數(shù)據(jù)流中，Model（可以理解為狀態(tài)的集合） 中可以修改自己或其他Model的狀態(tài)， 用戶的操作（如在輸入框中輸入內(nèi)容）也可以修改狀態(tài)。這使改變一個(gè)狀態(tài)有可能會(huì)觸發(fā)一連串的狀態(tài)的變化，最后很難預(yù)測(cè)最終的狀態(tài)是什么樣的。使得代碼變得很難調(diào)試。如下圖所示：

image.png

與雙向數(shù)據(jù)流比，在單向數(shù)據(jù)流中，當(dāng)你需要修改狀態(tài)，完全重新開(kāi)始走一個(gè)修改的流程。這限制了狀態(tài)修改的方式，讓狀態(tài)變得可預(yù)測(cè)，容易調(diào)試。

單向數(shù)據(jù)流的使用場(chǎng)景

多個(gè)組件會(huì)共享狀態(tài)時(shí)，共享狀態(tài)和組件間（兄弟組件）通信變的不容易。我們把共享狀態(tài)抽取出來(lái)，用單向數(shù)據(jù)流的方式會(huì)變得容易。

Vuex 簡(jiǎn)介

Vuex 是適用于 Vue.js 應(yīng)用的狀態(tài)管理庫(kù)，為應(yīng)用中的所有組件提供集中式的狀態(tài)存儲(chǔ)與操作，保證了所有狀態(tài)以可預(yù)測(cè)的方式進(jìn)行修改。

Vuex 是單向數(shù)據(jù)流的一種實(shí)現(xiàn)。

核心概念

State

State 用來(lái)存狀態(tài)。在根實(shí)例中注冊(cè)了store 后，用 this.$store.state 來(lái)訪問(wèn)。

Getters

Getters 從 state 上派生出來(lái)的狀態(tài)。可以理解為基于 State 的計(jì)算屬性。很多時(shí)候，不需要 Getters，直接用 State 即可。

Mutations

Mutations 用來(lái)改變狀態(tài)。需要注意的是，Mutations 里的修改狀態(tài)的操作必須是同步的。在根實(shí)例中注冊(cè)了 store 后， 可以用 this.$store.commit('xxx', data) 來(lái)通知 Mutations 來(lái)改狀態(tài)。

Actions

Actions 通過(guò)調(diào)用 Mutations 來(lái)改狀態(tài)。Actions 可以包含異步操作。在根實(shí)例中注冊(cè)了 store 后， 可以用 this.$store.dispatch('xxx', data) 來(lái)存觸發(fā) Action。

Vuex 的完整流程

組件中觸發(fā) Action，Action 提交 Mutations，Mutations 修改 State。 組件根據(jù) State 或 Getters 來(lái)渲染頁(yè)面。具體如下圖

image.png