vue刷新页面，数据不丢失

在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：

方法1、利用localStorage/sessionStorage将数据储存在外部，做一个持久化储存，通过监听beforeunload事件来进行数据的localStorage存储，beforeunload事件在页面刷新时进行触发，具体做法是在App.vue的created()周期函数中下如下代码：

export default {
   name: 'App',
   created () {    
       //在页面加载时读取localStorage里的状态信息
       if (window.localStorage.getItem('list')) {
          //this.$store.replaceState()替换 store 的根状态
          this.$store.replaceState(Object.assign({}, this.$store.state, 
          JSON.parse(window.localStorage.getItem('list'))))
      }
          //在页面刷新时将vuex里的信息保存到localStorage里
          window.addEventListener('beforeunload', () => {
          window.localStorage.setItem('list', JSON.stringify(this.$store.state))
      })
  }
}    

　方法2：由此得知计算属性的结果会被缓存，也就是说在有缓存的情况下，computed会优先使用缓存，于是也可以在state数据相对应的页面这样写：

computed:{
   orderList() {
       return this.$store.state.orderList
   }
}