vuex实例方法replaceState解决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)); }); 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/sjkxydsj/11035.html