用响应式方法，编写可状态回滚的webApp

实际项目遇到的问题

        在项目上，遇到了表格翻页到若干页，再跳转到其它页面，然后返回到当前页面时，页码和表格翻页无法保存的问题。

进一步分析一下业务场景，进入页面获取表格信息大概分为一下几种情况：

        1、首次进入：使用初始检索条件获取数据（第一页，默认行数）。

        2、修改检索条件（检索项，页码，条数）。

        3、跳回表格页并使用跳走前缓存的数据（跳转后操作不会改变相同搜索条件产出的表格数据）

        4、跳回表格页但只保留检索条件，重新获取数据（跳转后操作会/可能会改变相同搜索条件产出的表格数据）

        5、跳回后重置检索信息（与第一条相同）

        

---

为什么使用响应式纯函数的方法        

为什么是响应式？

        这就要从响应式和命令式的本质区别开始说起，以倒水为例，响应式的方式是，去倒杯水，动作实施者会根据指令（用户输入），自动做出相应举动（把剩的水倒掉，冲杯子，倒水，端过来）。而命令式，却需要一步步告知下一步的操作：把剩的水倒掉、冲杯子、倒水、端过来...。说回上面描述的5种场景，我希望表格数据可以通过场景（上述5种）+ 检索条件自动获取。从而清晰明确的维护业务数据。

为什么是纯函数？

        纯函数最大特点是，相同的输入总会产生相同的结果。保障了数据的准确性。

---

理论实现方式

        首先需要一个全局的状态树，react生态圈有redux，mobx等、angular生态圈有ngrx、vue生态圈有vuex。根据使用的框架选用不同的状态存储工具。

        其次建立栈数据结构，来存储多个版本的数据，栈的每个元素数据包含两部分，场景条件变量和UI数据，当需要获取新数据场景时，取新数据做入栈操作（只手动维护场景变量），获取老数据时不需要重新获取计算数据。直接出栈，UI永远绑定栈顶元素的UI数据。

        自动获取UI所需数据，由于实际业务中会有复杂的业务场景，甚至异步数据的拼装等等，可以用rxjs库来优雅的实现响应式的异步处理。

        获取UI数据完成后，UI数据和场景条件变量一同入栈，UI自动绑定栈的栈顶元素。  

        以上业务场景的实现：

        1、首次进入：获取默认检索条件 +  场景变量（fetch） =  UI变量  一同入栈。

        2、修改检索条件： 新的检索条件 +  场景变量（fetch）=  UI变量  一同入栈。

        3、跳回表格页并使用跳走前缓存的数据：场景变量（back） 直接出栈。

        4、跳回表格页但只保留检索条件，重新获取数据： 栈顶检索条件 + 场景变量（update）= UI变量 一同入栈。

        5、跳回后重置检索信息： 获取默认检索条件 + 场景变量（fetch） =  UI变量  一同入栈。（同第一条）