vuex刷新时数据有丢失如何解决-创新互联

今天就跟大家聊聊有关vuex刷新时数据有丢失如何解决，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

前言

vue构建的单页大型项目中，可能会用到Vuex 。Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

但是有一个问题就是：vuex的存储的数据只是在页面的中，相当于我们定义的全局变量，刷新之后，里边的数据就会恢复到初始化状态。但是这个情况有时候并不是我们所希望的。

比如，用户已经登录了，我把登录状态放到state中了，一刷新页面，还要重新登录？购物车里的添加的数据，一刷新要重新添加？

解决思路：

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。

页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。

如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

sessionStorage和localStorage介绍

H5提供了我们常用的localStorage和sessionStorage。

两者的区别：localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。

存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem、removeItem、clear等。

代码：

项目目录结构：

在项目的入口页面（App.vue）里添加监听刷新事件：

name: 'App',
 mounted () {
 window.addEventListener('unload', this.saveState)
 },
 methods: {
 saveState () {
  sessionStorage.setItem('state', JSON.stringify(this.$store.state))
 }
 }