Vuex 教程

什么是 Vuex

Vuex 是一個(gè)專門為 Vue.js 應(yīng)用設(shè)計(jì)的 狀態(tài)管理模型 + 庫(kù)。它為應(yīng)用內(nèi)的所有組件提供集中式存儲(chǔ)服務(wù)，其中的規(guī)則確保狀態(tài)只能按預(yù)期方式變更。它可以與 Vue 官方開發(fā)工具擴(kuò)展(devtools extension) 集成，提供高級(jí)特征，比如 零配置時(shí)空旅行般（基于時(shí)間軸）調(diào)試，以及狀態(tài)快照 導(dǎo)出/導(dǎo)入。

什么是”狀態(tài)管理模型“？

讓我們從一個(gè)簡(jiǎn)單的 Vue 計(jì)數(shù)器應(yīng)用開始：

這是一個(gè)含有以下部分的自包含( self-contained )應(yīng)用：

• state (狀態(tài))，驅(qū)動(dòng)我們應(yīng)用的真實(shí)的源；

• view (視圖)，對(duì)應(yīng)著 狀態(tài) 的聲明式映射；

• actions (動(dòng)作)，用戶在 視圖 上的輸入引起狀態(tài)的更改的可能方式。

這是一個(gè)非常簡(jiǎn)單的“單向數(shù)據(jù)流”思想的體現(xiàn)：

不管怎樣，當(dāng)我們有多組件共享公共狀態(tài)時(shí)，簡(jiǎn)單快速地分解如下：

• 多視圖可能依賴于同一份狀態(tài)。

• 來(lái)自不同視圖的動(dòng)作可能需要變更同一份狀態(tài)。

對(duì)于問(wèn)題一，在深層嵌套組件間傳遞屬性過(guò)于冗長(zhǎng)，并且不能簡(jiǎn)單地在同級(jí)別的組件間傳遞。對(duì)于問(wèn)題二，我們常常采取這樣的解決方案：直接引用 父/子 實(shí)例，又或是通過(guò)事件來(lái)修改和同步多份狀態(tài)副本。這樣的模型是脆弱的，代碼很快會(huì)變得不可維護(hù)。

所以我們?yōu)槭裁床粡亩鄠€(gè)組件中把共享狀態(tài)提取出來(lái)并作為全局單件管理呢？這樣的話，我們的組件樹就變成了一個(gè)大的”視圖“，樹中的任意一個(gè)組件，不管它們?cè)谀膫€(gè)位置，都可以訪問(wèn)狀態(tài)或者觸發(fā)動(dòng)作！

另外，通過(guò)定義和分離狀態(tài)管理中的概念，強(qiáng)制使用某些規(guī)則，使得代碼更結(jié)構(gòu)化和高可維護(hù)性。

這是 Vuex 背后的基本思想，受到了 Flux，Redux 和 The Elm Architecture的啟發(fā)。不像其他模型，Vuex 也是一個(gè)專門為 Vue.js 設(shè)計(jì)的庫(kù)，充分利用了它微妙的響應(yīng)式機(jī)制，從而實(shí)現(xiàn)高效更新。

什么時(shí)候應(yīng)該使用?

盡管 Vuex 幫助我們處理共享狀態(tài)管理，但是也帶來(lái)了更多的思考和樣板文件。這是一個(gè)短期效益和長(zhǎng)期效益的權(quán)衡。

如果你沒有開發(fā)過(guò)大型的單頁(yè)應(yīng)用(SPA)就立刻上 Vuex，可能會(huì)覺得繁瑣然后排斥，這是很正常的 —— 如果是個(gè)簡(jiǎn)單的應(yīng)用，大多數(shù)情況下，不用 Vuex 還好，你要的可能就是個(gè)簡(jiǎn)單的 全局事件總線(global event bus)。不過(guò)，如果你構(gòu)建的是一個(gè)中到大型單頁(yè)應(yīng)用，當(dāng)你在考慮如何更好的在 Vue 組件外處理狀態(tài)時(shí)，Vuex 自然就是你的下一步選擇。Redux 的作者有一句話說(shuō)的不錯(cuò)：

原文：Flux libraries are like glasses: you’ll know when you need them.
譯文：Flux 庫(kù)就像眼鏡：當(dāng)你需要它們的時(shí)候你會(huì)懂的。