Vuex页面刷新数据丢失的问题
为什么说刷新页面vuex的数据会丢失
刷新页面vuex的数据会丢失属于正常现象,(vuex的数据并不是弄丢了,而是初始化了,回到初始值,回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了。
解决办法?
方法一:
将state的数据保存在localstorage,sessionstorage或cookie中。
在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.store的replaceState方法,替换store的根状态
在beforeunload方法中将store.state存储到sessionstorage中。
export default {name: 'app',created () {// 在页面加载时读取sessionStorageif (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-persistedstate,可以自动存储。
下载:
npm install --save vuex-persistedstate
使用:
在store.js中引入
import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({//配置plugins: [createPersistedState()]
})
默认的是存储到localStorage里的,我们也可以存到sessionStorage中,如:
import createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({//配置plugins: [createPersistedState({storage: window.sessionStorage})]
})
总结
- Vuex只是在内存保存状态,刷新之后就会丢失,如果要持久化就要存起来。
- localStorage就很适合,提交mutation的时候同时存入localStorage,store中把值取出作为state的初始值即可。
- 这里有两个问题,不是所有状态都需要持久化;如果需要保存的状态很多,编写的代码就不够优雅,每个提交的地方都要单独做保存处理。这里就可以利用vuex提供的subscribe方法做一个统一的处理。甚至可以封装一个vuex插件以便复用。
- 类似的插件有vuex-persist、vuex-persistedstate,内部的实现就是通过订阅mutation变化做统一处理,通过插件的选项控制哪些需要持久化
Vuex页面刷新数据丢失的问题相关推荐
- vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- 页面刷新数据丢失解决方案
页面刷新数据丢失解决方案1 created(){//在页面加载时读取localStorage里的状态信息if (localStorage.getItem("data") ) {// ...
- 前端有关解决Vuex页面刷新之后数据丢失的问题
问:有关vuex刷新页面之后数据丢失的问题 答:vuex+缓存解决这个问题. 在使用vuex的时候,刷新页面之后在vuex中存储的数据会丢失,而缓存在刷新页面的时候数据是不会丢失的,所以把vuex和缓 ...
- 解决vuex页面刷新导致数据丢失问题
vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,因为页面刷新之后代码重新加载这样vuex的数据自然就会为空.怎么解决这个问题呢?vuex自身好像没有太好的解决方案,但 ...
- 解决页面刷新数据丢失,数据持久化问题
npm i vuex-persistedstate 数据持久化,解决vue中页面刷新,数据丢失的情况
- Echaer图表 组件传值,页面刷新数据丢失
记录一次Echart 图表封装之后,父子组件之间的传值,页面刷新后数据丢失的问题, (如遇到该问题,首先确保组件之间传值没有问题,我在该问题上花了很多的时间) 原因: 页面刚保存是有显示,然而刷新页面 ...
- vue使用query传参页面刷新数据丢失问题
今天开发的时候用query直接传了一个对象,在跳转之后的页面在对这个对象做解析,这样做其实蛮方便的,可惜的是页面不能刷新,虽然刷新后面页面的url还在,但是页面的object解析出错了. 寻其原因 第 ...
- vuex页面数据丢失_解决 vuex 中的数据在页面刷新之后就丢失的问题
在vue的项目中我们一般都会使用到vuex,在vuex中我们会保存一个需要全局使用的变量或者状态,这样方便我们使用.但是vuex的store中的数据有一个特性,那就是在页面刷新时,页面会重新加载vue ...
- vuex页面数据丢失_使用vuex解决刷新页面state数据消失的问题记录
在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex ...
最新文章
- ES报the same id but is a different node instance
- 重新认识错过(通向财富自由之路学习笔记十四)
- 6.1的学习成果,主要是用到指向函数的指针
- [HNOI2008]GT考试
- 【Android】对话框 AlertDialog
- Log4net使用简介
- linux chrome 管理员,Linux下google chrome浏览器flash无法启用的解决
- 2014 传播一点正能量
- 高效点的全排列算法---堆算法(跟堆排序没关系)
- VS2010打开就自动关闭问题解决
- 七月算法机器学习 10 聚类算法与应用
- wps下一步快捷键_WPS表格常用快捷键大全(非常全面)
- 注册岩土工程师计算机专业的能考吗,岩土工程师报考条件
- 局域网故障诊断袖珍手册
- 中学生读以奋斗者为本有感3500字
- 什么是坐标系,不同坐标系之间有什么区别
- 西哈努克之子柬埔寨国王西哈莫尼抵京-西哈努克-国王-抵京
- C++11 enable_if 详解
- JavaScript(红宝书)(二)
- BootStrap中修改navbar导航条的默认高度