一、分層架構

　　1.Web App分為三層：行為層， 數據存儲層和協議層，各層的的分工是非常明確的。

　　　　a.行為層， 體現在.vue組件和路由上，存放一些簡單的數據主要用於與用戶之間的及時交互。

　　　　b.數據存儲層， 體現在vuex中，通俗的來講就是將請求來的數據進行存儲和處理

　　　　c.協議層，就是獲取數據（包括請求和本地獲取等）

　　2.對於三層直接的基礎約束

　　　　1.數據/函數的調用不能跨層（功能性接口除外，比如剛進頁面的請求）

　　　　2.數據處理工作應該在Store中

　　　　3.view層只能對Store中的數據做簡單處理（如對用戶設定的條件進行數據過濾）

　　　　4.請求寫在Store的action中

　　　　5.Websocket/服務器推送的數據在Store中處理（要不然有可能會產生內存泄漏）

二、同步操作流程

　　問題： 為什麽不能直接調用store中的數據？

　　回答： 因為state是實時更新的，mutations無法進行異步操作，而如果直接修改state的話是能夠異步操作的，當你異步對state進行操作時，還沒執行完，這時候如果state已經在其他地方被修改了，這樣就會導致程序存在問題了。所以state要同步操作，通過mutations的方式限制了不允許異步。

三、異步操作流程

Web App 分層架構（基於 Vue+Router+Vuex）