解决redux/Vuex刷新页面数据丢失问题-蒲公英云

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

小咪咪 2021-09-30 08:10 2008阅读 0赞

前言

先简单描述一下需求：

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

思考

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

在这里插入图片描述

尝试

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

分析

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

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

页面间数据交互的方式有很多种，在实际项目中我们要从多方面考虑去选择最优的方法。例如要考虑A页面是否是B页面的唯一来源、是否还能通过其它页面跳转至B页面…
实践是理论基础到真实能力的一种转化。在实际的业务场景中要前言使用基础，去验证基础，去通过基础来设计更合理的方案。

扩展（解决方案）

Vuex

思路：在页面刷新前将Vuex里的数据保存到 sessionStorage 中，进入应用时再从 sessionStorage 中取出数据并替换 store 的state，还原之前的状态；在Redux中也同理。

/** * 缓存Vuex里的数据，解决页面刷新Vuex数据丢失问题 * @param {*} type 缓存方式 sessionStorage 和 localStorage ,默认是sessionStorage */
export function cacheVuex(store, type = sessionStorage) { 
  if (type.getItem('_store')) { 
    store.replaceState(
      Object.assign({ }, store.state, JSON.parse(type.getItem('_store')))
    );
  }
  window.addEventListener('beforeunload', () => { 
    type.setItem('_store', JSON.stringify(store.state));
  });
}

1.redux状态的持久化，保证页面刷新或者关闭后能恢复状态

代码如下

let initialState={};
if(localStorage.getItem('store')){
  initialState=JSON.parse(localStorage.getItem('store'));
}
// 1. Initialize
const app = dva({
  history: browserHistory,
  initialState:initialState
});
window.onunload=function () {
  localStorage.setItem('store',JSON.stringify(app._store.getState()));
};