Vuex 強(qiáng)調(diào)使用單一狀態(tài)樹，即在一個(gè)項(xiàng)目里只有一個(gè) store，這個(gè) store 集中管理了項(xiàng)目中所有的數(shù)據(jù)以及對(duì)數(shù)據(jù)的操作行為。但是這樣帶來(lái)的問(wèn)題是 store 可能會(huì)非常臃腫龐大不易維護(hù)，所以就需要對(duì)狀態(tài)樹進(jìn)行模塊化的拆分。
首先貼出一個(gè)邏輯比較復(fù)雜的H5項(xiàng)目：源碼 & DEMO
該項(xiàng)目主要包括 banner、feeds、profile 三個(gè)部分。其中 feeds 模塊最復(fù)雜，需要對(duì)數(shù)據(jù)列表進(jìn)行處理，如果單條數(shù)據(jù)中是圖片：1張按照屏幕寬展示；2張各占50%；3張以上采用九宮格形式展示；如果單條數(shù)據(jù)是視頻，則顯示播放按鈕，播放一條視頻時(shí)，其他視頻暫停。
由于該項(xiàng)目數(shù)據(jù)、交互較多，我們使用 Vuex 對(duì)數(shù)據(jù)進(jìn)行托管，只在 Vue 組件中保留最基本的操作。
如果不使用 Vuex，許多數(shù)據(jù)流需要通過(guò) props 的方便向下傳遞，十分不便，尤其是一些跨組件的操作更加困難。使用 Vuex 后就可以將數(shù)據(jù)與操作保留在 store 中，每個(gè)組件都能輕松調(diào)用。
