vuex实例方法replaceState解决vuex页面刷新数据丢失问题

一，概述

在我们使用vuex的时候，常常遇到的问题就是，在页面刷新之后，vuex中的数据丢失。但其实这不是数据丢失，实际上是vuex重新创建实例，把数据初始化了。
为了避免这种情况，需要将vuex数据持久化。

二，store.replaceState实现vuex数据持久化

实现vuex的数据持久化，可以重新发请求获取数据，也可以使用插件，还可以利用浏览器本地存储。但归根到底，就是让vuex重新初始化之后，再次拥有数据。
于是，就可以灵活地选择这三种方案，这里我就写store.replaceState结合浏览器地sessionStorage实现vuex地数据持久化。
原理：

利用 pagehide 事件在用户刷新页面前将vuex的store存入sessionstorage中，然后在刷新后页面加载时，从sessionstorage中重新获取

// 在页面加载时读取sessionStorage里的状态信息
let storeCurrent = window.sessionStorage.getItem('store');
if (storeCurrent !== null) {store.replaceState(Object.assign({}, store.state, JSON.parse(storeCurrent)));sessionStorage.removeItem('store');
}
// // pagehide 解决ios移动端不支持beforeunload,安卓端两个都可以用
// // 在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('pagehide', () => {sessionStorage.setItem('store', JSON.stringify(store.state));
});

vuex实例方法replaceState解决vuex页面刷新数据丢失问题相关推荐

页面刷新数据丢失解决方案
页面刷新数据丢失解决方案1 created(){//在页面加载时读取localStorage里的状态信息if (localStorage.getItem("data") ) {// ...
vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
解决vue页面刷新或者后退参数丢失的问题
解决vue页面刷新或者后退参数丢失的问题参考文章: (1)解决vue页面刷新或者后退参数丢失的问题 (2)https://www.cnblogs.com/myfate/p/11573824.html ...
vuex页面数据丢失_解决 vuex 中的数据在页面刷新之后就丢失的问题
在vue的项目中我们一般都会使用到vuex,在vuex中我们会保存一个需要全局使用的变量或者状态,这样方便我们使用.但是vuex的store中的数据有一个特性,那就是在页面刷新时,页面会重新加载vue ...
Vuex页面刷新数据丢失的问题
为什么说刷新页面vuex的数据会丢失刷新页面vuex的数据会丢失属于正常现象,(vuex的数据并不是弄丢了,而是初始化了,回到初始值,回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的,刷 ...
解决页面刷新数据丢失，数据持久化问题
npm i vuex-persistedstate 数据持久化,解决vue中页面刷新,数据丢失的情况
Echaer图表组件传值,页面刷新数据丢失
记录一次Echart 图表封装之后,父子组件之间的传值,页面刷新后数据丢失的问题, (如遇到该问题,首先确保组件之间传值没有问题,我在该问题上花了很多的时间) 原因: 页面刚保存是有显示,然而刷新页面 ...
vue使用query传参页面刷新数据丢失问题
今天开发的时候用query直接传了一个对象,在跳转之后的页面在对这个对象做解析,这样做其实蛮方便的,可惜的是页面不能刷新,虽然刷新后面页面的url还在,但是页面的object解析出错了. 寻其原因第 ...
前端有关解决Vuex页面刷新之后数据丢失的问题
问:有关vuex刷新页面之后数据丢失的问题答:vuex+缓存解决这个问题. 在使用vuex的时候,刷新页面之后在vuex中存储的数据会丢失,而缓存在刷新页面的时候数据是不会丢失的,所以把vuex和缓 ...
解决vuex页面刷新导致数据丢失问题
vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,因为页面刷新之后代码重新加载这样vuex的数据自然就会为空.怎么解决这个问题呢?vuex自身好像没有太好的解决方案,但 ...

vuex实例方法replaceState解决vuex页面刷新数据丢失问题

一，概述

二，store.replaceState实现vuex数据持久化

vuex实例方法replaceState解决vuex页面刷新数据丢失问题相关推荐

最新文章

热门文章