vuex使用中store刷新页面state清空的问题

刚开始使用vuex，在使用过程中遇到store中state数据刷新页面后清空的问题，很是困惑，经过各种查看终于解决，记录一下方便后期使用

清空的原因

vuex的状态存储是响应式的，当vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，里面的数据就会恢复到初始化的状态

解决方案

网上查找的，做个记录

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

代码实现

一、更改store文件下state的定义，加入判断sessionStorage是否有state，存在，则加载sessionStorage取出的数据

const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
  user: []
}

二、修改app.vue 文件，添加监听

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

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

这里补充下sessionStorage和ocalStorage的区别

web Storage介绍
web Storage 是HTML 5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

setItem (key, value) —— 保存数据，以键值对的方式储存信息。
getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
clear () —— 删除所有的数据
key (index) —— 获取某个索引的key

localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

var storage = null;  
    if(window.localStorage){              //判断浏览器是否支持localStorage  
       storage = window.localStorage;       
       storage.setItem("name", "Rick");    //调用setItem方法，存储数据  
       alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  
       storage.removeItem("name");     //调用removeItem方法，移除数据  
       alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null  
  
    }  

sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。