Web App 分层架构（基于 Vue+Router+Vuex）

Posted 2020-10-10

 

一、分层架构

 

　　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的方式限制了不允许异步。

三、异步操作流程