今天就跟大家聊聊有关vuex刷新时数据有丢失如何解决,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
前言
vue构建的单页大型项目中,可能会用到Vuex 。Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
但是有一个问题就是:vuex的存储的数据只是在页面的中,相当于我们定义的全局变量,刷新之后,里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。
比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加?
解决思路:
监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/localStorage中。
页面打开之后,判断sessionStorage/localStorage中是否存在state对象,如果存在,则说明页面是被刷新过的,将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。
如果不存在,说明是第一次打开,则取vuex中定义的state初始值。
sessionStorage和localStorage介绍
H5提供了我们常用的localStorage和sessionStorage。
两者的区别:localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。sessionStorage仅在当前会话下有效,关闭页面或浏览器后被清除。
存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。
源生接口可以接受,亦可再次封装来对Object和Array有更好的支持。浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行)
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem、removeItem、clear等。
代码:
项目目录结构:
在项目的入口页面(App.vue)里添加监听刷新事件:
name: 'App', mounted () { window.addEventListener('unload', this.saveState) }, methods: { saveState () { sessionStorage.setItem('state', JSON.stringify(this.$store.state)) } }
网页标题:vuex刷新时数据有丢失如何解决-创新互联
网站URL:https://www.cdcxhl.com/article30/ddhsso.html
成都网站建设公司_创新互联,为您提供定制开发、搜索引擎优化、域名注册、小程序开发、品牌网站设计、做网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联