解决redux/Vuex刷新页面数据丢失问题

前言

先简单描述一下需求：

• A页面和B页面都需要通过同一个接口获取的数据来展示页面；
• B是A的子页面，从A页面可以跳转到B页面；

思考

从减少页面的http请求数来达到性能优化的方面来考虑：可不可以A跳到B页面后，不再ajax请求数据，而是直接获取A页面Model里的数据？（如图）

尝试

按上述思路可以达到需求。但同时也发现一个问题：在重新刷新B页面时，B页面上显示的数据为空。

分析

Redux一个用于应用程序状态管理的开源JavaScript库，本质是管理组件数据状态的。刷新浏览器，相当于重新开启应用，必定会从最初的状态重新开始。如果想获取值，要么向后台发送请求,要么将值本地存储，从本地存储去取值。单说刷新浏览器，肯定是回复到最初状态，相当于什么也没做。

这里也涉及到前端路由和后端路由的问题。前端路由分为hash模式和history模式，我们从A页面跳转到B页面，本质上并没有从后端重新请求数据，而是前端通过正则匹配路由规则从而显示相应的页面（