如何解决vuex刷新页面以后丢失store的数据问题
最近遇到个问题,vue 中vuex
中的store
数据,会在页面刷新后初始化,为了解决这一问题决定将store
里面数据在页面刷新前保存到sessionStorage
,至于为何用他,因为页面关闭后他会被清空,localStorage
则会一直存在,cookie
又太小,因此sessionStorage
最合适。
解决方案
- 在 app.vue 的
created
方法中读取sessionstorage
中的数据存储在store
中,此时用vuex.store
的replaceState
方法,替换store
的根状态 - 在
beforeunload
方法中将store.state
存储到sessionstorage
中。
export default { name: 'app', created () { // 在页面加载时读取 sessionStorage if (sessionStorage.getItem('store')) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store')))) } // 在页面刷新时将 store 保存到 sessionStorage 里 window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON.stringify(this.$store.state)) }) } }
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 如何解决vuex刷新页面以后丢失store的数据问题
码云笔记 » 如何解决vuex刷新页面以后丢失store的数据问题