Vue刷新后页面数据丢失问题的解决过程

在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,这篇文章主要给大家介绍了关于Vue刷新后页面数据丢失问题的解决过程,需要的朋友可以参考下！

一、为什么刷新后数据会丢失

vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。

二、解决思路

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据

办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）

分析：

办法一的缺点是不安全，不适用大数据量的存储；

办法二适用于少量的数据，并且不会出现网络延迟；

办法三是要讲的重点，办法二和办法一一起使用。

有两种方式可以把值存储到sessionStoage
 
// 第一种方式，标准方法
sessionStorage.setItem('email','xxx@qq.com');
 
// 第二种方式，直接当成普通对象属性赋值。
sessionStorage.blog = 'http://xxxxxx';
两种获取值的方法
 
// 1. 标准方法
var email = sessionStorage.getItem('email');
// 2. 直接取属性值
var blog = sessionStorage.blog;
移除key/value
 
// 移除之后，再获取值，将会得到 undefined
// 根据key，移除键值对
sessionStorage.removeItem('email');
清空sessionStorage
 
// 全部清除
sessionStorage.clear();
//也可以指定删除
sessionStorage.removeItem('keyName')
ps：如果这个key是存储在store里面的，还可以这么写
 
created() {
// 在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem('store')) {
  this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
}
// 在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
  }
localStorage的操作方法也同理，这里不再赘述
 
三、解决方法
本人选择的是sessionStorage，选择的原因是：
 
其一，由于vue是单页面应用，操作都是在一个页面跳转路由，我只需要在当前页面使用key；
 
其二，使用sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。
 
具体代码如下：
 
created () {
  if (this.$route.query !== {} && typeof (this.$route.query) === 'string') {
this.userKey = this.$route.query
sessionStorage.setItem('userkey', this.userKey) //初次收到userKey，存起来
  } else {
if (sessionStorage.getItem('userkey')) {
  this.userKey = sessionStorage.getItem('userkey') //不是第一次了，取出来
} else {
  console.log('##userInfo##', store.state.user.userInfo)
  //如果实在是没有了，就直接去store里面取
  this.userKey = store.state.user.userInfo.userKey
  }
  }
  console.log('##userkey##', this.userKey)//检查userKey变没变
  this.getcollect()//调用方法
},
beforeDestroy () {
//毁灭前先移除掉，否则我跳转到其它地方，sessionStorage里面依旧存在着userKey
  sessionStorage.removeItem('userkey')
  },
四、总结
sessionStorage、localStorage、cookie三者的区别：
 
localStorage -- 是永久存储在本地，除非你主动去删除;【手动删除】
 
sessionStorage -- 是存储到当前页面关闭为止，和其他tab页没关联;【页面关闭就没有了】
 
cookie -- 则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取，会和后台进行交互。
 
怎么把一个对象存储到浏览器本地中
 
利用sessionStorage或者localStorage把对象存到浏览器中;
 
//保存数据
localStorage.setItem("key", "value");
sessionStorage .setItem("key", "value");
//读取数据：
let lastname = localStorage.getItem("key");
let lastname = sessionStorage .getItem("key");
//删除数据：
localStorage.removeItem("key");
sessionStorage .removeItem("key");

值得注意的是：

存储的key值只在单页面使用，则选择sessionStorage

存储的key想要在各个页面均能使用，要选择localStorage

Vuex ----状态管理模式 + 库

相当于共享仓库，方便任何组件直接获取和修改。

state - 数据【存项目共享状态，是响应式的，store的数据改变，所有依赖此状态的组件会更新】

$store.state.count

mutations - 方法【同步函数，只建议在这个地方修改数据】

inc(state, 参数唯一) {}

$store.commit('inc', 2)

actions -【异步操作】【提交的是mutations，不直接修改状态】

increment(context, num) {context.commit()}

this.$store.dispatch('',arg)

getters - 包装数据 【store的计算属性，可缓存】

show: function(state) {}

this.$store.getters.show

传参，返回函数：show(state) {return function(参数) {return ...}}【不会缓存数据】

想要存取、修改、删除vuex仓库中的状态数据，需要按照一定的语法规则，比如按照action-->mutaion-->state的规则去增删改查，比如使用辅助函数如增删改查vuex中的数据