SPA中跨页面表单状态传递

Question

假设有一个订单保存需要经过多个页面进行状态收集，并且在最后一个页面内向后端提交数据

如 /订单名称 -> /收货地址 -> /收货时间 -> 订单确认
                   |
                   |
                   |-> /收货地址选择页  

对于这样的流程，大家在SPA中，对于这样的长流程，大家平时都是如何处理的。

如果对这些视图，每个都对应的建立一个路由，在这些路由间进行状态传递与回退时进行状态保留也是很困难。

如果将这些视图不进行拆分，全在一个路由页面下，使用内存对象进行控制流程，单个页面内逻辑又过于复杂。

想问问大家，在angular/react/vue这类框架下，如何处理这些问题。

烦请指教，谢谢大家。

Answer 1

正好项目中也有类似问题，说下我的理解和解决方案，可能不够好，期待其它的思路：

首先楼主的第二个方案是有风险的，全放在一个页面下，但看起来又是多个页面多个步骤，用户在最后一步刷新页面怎么办？回到哪一页？数据还在不在？

在移动端，有时候刷新甚至不是用户触发的，可能页面扔后台，过一会儿再回来就被刷新了，而用户不知道什么是SPA，只知道填了半天的东西要重新来过他们会骂娘。

我的观点是：即使是SPA，WEB的每个页面也都应该具备可访问性，浏览器的意见很重要的，SPA也要按照基本法。

要保证页面的可访问性，每个页面就应该是独立的，而上下文的数据和API一样，都一样属于外部资源(External resource)。

因此目前我的解决方式（项目使用flux，以下按flux + react举例）是在前端再造一层类似API的异步数据池（因为可能需要存到LocalStorage保证刷新不丢）。
每步提交的时候发action，action就像post到API一样把数据存到数据池里，下游页面再在componentDidMount的时候发action去请求这个资源，当然这个资源有可能不存在，不过好在是异步的，我们可以走异常处理流程，一切都跟API一样。

这么做的好处是页面与上下文耦合度低，都被封装到action的实现中了。

坏处是增加了一层数据池的概念和相应的代码。团队里经常就有人问我明明感觉上这些都是同步的东西（不考虑页面刷新的话确实是），存取的过程好像额外又兜了一圈。

我感觉这个问题的核心，是前端正在应用化，而应用的页面结构和Web是有本质差别的：应用可以看作单一入口的树状结构，而Web由于url的存在，结构强制扁平，每个url都可能是入口。

应用没有刷新，没有url单独访问（多数情况下），这意味着上下文是可靠的，而Web端不是，每个页面，都必须校验自己所处的上下文。

我的方法其实粗暴且没技术含量，缺啥补啥，缺上下文就自己写，就当抛砖引玉，希望看到其它人更好的思路

Answer 2

简单的参数可以通过路由传递，比较复杂一点就要用到localStorage了，进入每个页面的时候先判断localStorage里面是不是有值，有的话，就用这些值填充表单，然后点击下一页的时候更新localStorage，最后提交表单之后，如果返回状态是success，就清空localStorage。然后说一下WEB的每个页面也都应该具备可访问性问题，如果用户是个怪咖，进来不是从A->B->C, 而是直接用路由调到B，而不经过A，这种行为应该是不允许的，要通过localStorage判断他是否有前一个页面的数据，如果没有重定向到A。

Answer 3

1.不用sotre :把要操作的订单信息保存到单独一个模块中，3个页面都引入这个模块，这个模块只输出一个object，然后再操作这个对象就可以了。

# order.js
let order = {
    id : 0,
    name : '',
    address : '',
    time : '',
}
export default order;

 # 其他路由模块
import order from 'order'

order.name = 'XXXX'; //这样操作订单

2.引入store机制 :具体实现 看下文档就明白了。

Answer 4

首先多谢大家的回答，评论没有markdown功能，所以新开一个回答

感觉在前端设计的一个store，进行模型存储会比较清晰

在产生订单的第一个页面，在store生成一条订单记录，并且产生一个唯一性id，后续所有页面中
根据这个唯一性id获取信息，并且进行对应的校验，但是这一块的校验后，对应的页面交互挺难做的

如 /订单名称 -> /收货地址 -> /收货时间 -> 订单确认
                   |
                   |
                   |-> /收货地址选择页  
                   

比如在收货时间页面，得确认收货地址已经填写，否则返回收货地址页面
订单确认页面，得判断收货地址，收货时间，返回对应的页面，这样的流程控制似乎过于的复杂，而且随着业务逻辑的变更，这些代码很难去维护。

但是除开这些，确实也没想到其他好用的方式了:(

另外想知道大家对于如/收货地址选择页这样的命令式页面，是如何设计的

这样的页面类似于模态框，只是进行一个数据选择，选择完成后，则返回之前的页面。
对于单个页面引用到收货地址还好做，如果多个页面需要复用到/收货地址选择页，感觉就很棘手了

/收货地址管理 ->/收货地址选择页
/订单管理 ->/收货地址选择也
等等，对于这样的页面，可能是希望选择完值之后，将选择的值传递给上一个页面，但是在url划分下，这类命令式的逻辑，实现起来就很曲则。

能想到的方式是，在store里头存入一个command对象，command对象封装了跳回原路由的逻辑
，在选择完数据后，执行对应的command，返回原路由，并携带对应的数据。
对于这类场景，大家的store是如何设计的

Answer 5

Vue使用vuex吧。
其他的都有和vuex类似的。比如 flux之类，何须自己设计