Vuex 教程

什么是 Vuex

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

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

讓我們從一個簡單的 Vue 計數(shù)器應(yīng)用開始：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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