Vuex页面刷新数据丢失的问题
Posted 纵有千堆雪与长街
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 ()
// 在页面加载时读取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-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变化做统一处理,通过插件的选项控制哪些需要持久化
vue: 解决vuex页面刷新数据丢失问题
参考技术A 1、一般在登录成功的时候需要把用户信息,菜单信息放置 vuex 中,作为全局的共享数据。但是在页面刷新的时候 vuex 里的数据会重新初始化,导致数据丢失。因为 vuex 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里面的数据就会被清空。
2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎么获取和响应这个变化,使用通过计算属性实现响应数据的变化,mapGetters 获取 vuex
但是刷新页面后数据丢失了!!
以上是关于Vuex页面刷新数据丢失的问题的主要内容,如果未能解决你的问题,请参考以下文章