vue单页面应用刷新网页后vuex的state数据丢失的解决方案

产生原因

做的项目是但页面应用，在刷新页面中发现，之前存储在store中的数据随着刷新，也给刷没了，哭唧唧，为什么会没了？这是为什么呢？因为store里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

解决思路

遇到问题当然要解决问题了，怎么解决，网友总是万能的，我看主要有一下三个方法。

第一种思路

一但改变vuex里的数据，便触发localStorage.setItem 方法，那store存在但意义何在？哈哈哈

第二种思路

一种是state里的数据全部是通过请求来触发action或mutation来改变，每次刷新都要重新请求，这不浪费资源么？

第三种思路

一种是刷新的时候将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中，这是对第一种思路对完善，不用每次改变vuex都要存储，我们可以监听到页面的刷新事件，然后在那个监听方法里将Vuex里的数据储存到本地存储中，完美！

解决过程

首先得选择合适的客户端存储

localStorage是永久存储在本地，除非你主动去删除;

sessionStorage是存储到当前页面关闭为止;

cookie则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取。

我选择的是sessionStorage,选择的原因vue是单页面应用，操作都是在一个页面跳转路由，另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。

用sessionStorage来保存state里的数据

export default {
name: ‘App’,
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))
})
}