Vuex 強調(diào)使用單一狀態(tài)樹，即在一個項目里只有一個 store，這個 store 集中管理了項目中所有的數(shù)據(jù)以及對數(shù)據(jù)的操作行為。但是這樣帶來的問題是 store 可能會非常臃腫龐大不易維護，所以就需要對狀態(tài)樹進行模塊化的拆分。
首先貼出一個邏輯比較復(fù)雜的H5項目：源碼 & DEMO
該項目主要包括 banner、feeds、profile 三個部分。其中 feeds 模塊最復(fù)雜，需要對數(shù)據(jù)列表進行處理，如果單條數(shù)據(jù)中是圖片：1張按照屏幕寬展示；2張各占50%；3張以上采用九宮格形式展示；如果單條數(shù)據(jù)是視頻，則顯示播放按鈕，播放一條視頻時，其他視頻暫停。
由于該項目數(shù)據(jù)、交互較多，我們使用 Vuex 對數(shù)據(jù)進行托管，只在 Vue 組件中保留最基本的操作。
如果不使用 Vuex，許多數(shù)據(jù)流需要通過 props 的方便向下傳遞，十分不便，尤其是一些跨組件的操作更加困難。使用 Vuex 后就可以將數(shù)據(jù)與操作保留在 store 中，每個組件都能輕松調(diào)用。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學習是年輕人改變自己的最好方式