解决Vue刷新页面时Vuex中数据丢失问题

在我们用Vue编写类似登录页面时，我们时常会遇到页面刷新后保存在Vuex中的数据丢失的问题，所谓丢失就是Vuex中的数据再次初始化了，那么，我们该如何解决这个问题呢？下文为大家解答！！！

 

 如图，我们在vuex.js中初始化了我们的数据，页面展现信息如下

 效果图如下：

 可见，我们在点击按钮旁有个数据1 ，我们在刷新页面的同时就要触发一个方法，在我们浏览器客户端中存储我们的Vuex中state对象 。

如下:

 

 在main.js中，我们给window添加一个页面刷新前的时间，用来在客户端的sessionStorage中暂存一个state对象

在页面刷新后：

 触发一个created钩子函数，用于将客户端sessionStorage中的数据去除存入state中，

Object.assign() 方法是对象原型中的数据枚举方法，第一个参数为目标对象，后面的参数可以为多个，可以将后面对象中的数据依次枚举存入第一个对象中，并且，如果有重复对象中的数据，后面的对象数据将会覆盖前面的数据。

效果图如下：

没有点击的情况下：

点击一次：

 

 刷新：

 我们发现数据没有丢失了。

总结：Vuex中的数据丢失就是Vuex中的对象数据重新初始化了一遍，要想数据不被初始化，就在页面刷新前将数据存入sessionStorage中，当页面刷新成功后，再将sessionStorage中的数据取出，重新赋值给Vuex中的对象即可！

 关于Vuex中的数据丢失的解决的其中一个方法就介绍到这了，希望对你有所帮助！！！