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

標籤：資料存放區   執行   font   png   同步   http   .com   ges   無法   

 

一、分層架構

 

　　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）