状态管理

今天来简单的谈一下什么是状态管理。

首先看一下这两个图

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