Vue页面刷新后store数据丢失

原因：
store本意不是用来存储数据的，而是存储组件状态。
但是因为存取速度比sessionStorage快。所以还是有人用来存数据。比如我。
那么这个重置的问题要咋搞呢？
解决办法：
使用window的beforeunload事件将store中的数据存储到sessionStorage中。
然后再声明周期函数created()中将session的数据替换掉vue中的store数据
不过这里有一个要注意异步的问题。因为js是异步执行机制。所以必须要等到session中的数据存储到store中之后才能执行涉及该store数据的代码，不然全部都是undefined。
可以通过promise对象来进行同步化

具体代码：

// 先建立seesion工具来统一调用
// util_session.js
import store from '../vuex/store'
// 用于sessionStorage替换store函数。
export function sessionReplaceStore (name) {
  return new Promise((resolve, reject) => {
    if (sessionStorage.getItem(name)) {
      // 替换state状态
      store.replaceState(
        Object.assign(
          {},
          store.state,
          JSON.parse(sessionStorage.getItem(name))
        )
      )
      resolve(true)
    } else {
      resolve(false)
    }
  })
}

// vue文件
// xxxx.vue
// 无关的内容就不写了
<script>
import {sessionReplaceStore} from '../../utils/util_session'

created () {
    // 页面刷新时恢复store数据
    var that = this
    sessionReplaceStore('store').then(reslove => {
    // 执行需要获取store数据有关的代码
      console.log(that.$store.state.stock)
    }
    // 发生页面销毁事件前将store数据存储至sessionStoreage中
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
</script>

这样就可以了。

代码说明：

promise()：javascript异步操作的处理结果

参考文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

store.replaceState()： 用来替换store中的state数据

参考文档：https://vuex.vuejs.org/zh/api/#replaceState

Object.assign(): 对象合并函数。将第二，第三参数的对象合并保存至第一参数的对象中。并且返回该对象。

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign