在我们用Vue编写类似登录页面时,我们时常会遇到页面刷新后保存在Vuex中的数据丢失的问题,所谓丢失就是Vuex中的数据再次初始化了,那么,我们该如何解决这个问题呢?下文为大家解答!!!
如图,我们在vuex.js中初始化了我们的数据,页面展现信息如下
效果图如下:
可见,我们在点击按钮旁有个数据1 ,我们在刷新页面的同时就要触发一个方法,在我们浏览器客户端中存储我们的Vuex中state对象 。
如下:
在main.js中,我们给window添加一个页面刷新前的时间,用来在客户端的sessionStorage中暂存一个state对象
在页面刷新后:
触发一个created钩子函数,用于将客户端sessionStorage中的数据去除存入state中,
Object.assign() 方法是对象原型中的数据枚举方法,第一个参数为目标对象,后面的参数可以为多个,可以将后面对象中的数据依次枚举存入第一个对象中,并且,如果有重复对象中的数据,后面的对象数据将会覆盖前面的数据。
效果图如下:
没有点击的情况下:
点击一次:
刷新:
我们发现数据没有丢失了。
总结:Vuex中的数据丢失就是Vuex中的对象数据重新初始化了一遍,要想数据不被初始化,就在页面刷新前将数据存入sessionStorage中,当页面刷新成功后,再将sessionStorage中的数据取出,重新赋值给Vuex中的对象即可!
关于Vuex中的数据丢失的解决的其中一个方法就介绍到这了,希望对你有所帮助!!!