今天来简单的谈一下什么是状态管理。
首先看一下这两个图
1. 服务端渲染的WEB开发
服务端渲染的WEB开发
2.前后端分离的单页应用(SPA: Single Page Application)
前后端分离的单页应用(SPA)
组件化与状态管理(Web Component And State Management)
组件直接的数据共享
Web组件化(Component)一个是被聊透了的话题了,它的益处无需多言,更好的编码效率,更好的代码阅读性,维护性,补充HTML5语义化标签的不足。然而,正因为在开发越来越复杂的SPA时,开始将各个页面开始模块化,页面公告模块组件化,一个页面拆分成多个子组件,组件的不断复用和重新组合,之前简单的组件端到端(组件到服务器端)的数据请求变的复杂和多余,单个数据源经常在不同页面但相同组件中共享,各种路由信息(Routing)需要处理。
我们可以想象一下,当一个页面中,相同的组件获取来自同一个接口的数据,这就意味着组件共享的是相同的数据Model。 正常逻辑下,其中一个组件如果进行了Model更新操作,服务器数据库的数据即相应的发生了改变,但是其他相同数据接口的组件,由于组件直接是相互隔离的,数据Model并不是同一个,所以组件与组件直接的数据通信便成为了一个很大的问题。当然,我们有个粗暴的解决方案,就是,在某个组件更新完数据后,我们重新 reload 整个页面,可这个时候整个原本想达到的SPA效果就没有了,体验大减,而你打开 Network 检测工具,你会发现整个页面发送了多个重复的接口请求,这无疑造成了很大的性能损失和资源浪费。所以才会出现Redux,Vuex这种专门针对状态管理的技术方案。
最后让我来总结一下,到底什么是状态管理?
状态管理就是,将客户端和服务器的多次交互当作一个整体,将多次交互所涉及的数据状态保存下来。
解决方式:
1. 保存在cookie中
2. 保存在session中
3. 保存在本地存储当中
4. 其它方式,使用第三方状态管理框架,如: Vuex