vue.js 本地存储 vuex本地存储持久化

场景分析：在实际项目开发过程中，如果公共数据比较多我们会使用vuex做公共状态管理，但是在对浏览器进行刷新操作的时候，会导致vuex内的数据丢失，这种情况有些时候是没问题的，但是有的时候我们需要某些数据可以持久化的保存，这样就需要做对应的处理，处理方式如下；

（注意：浏览器执行刷新操作的时候，页面内不是每个生命周期都会执行，而是只有部分生命周期会执行，执行顺序如下：beforeCreate, created, beforeMount, mounted, beforUpdate, updated）

1、利用浏览器的本地存储

实现原理就是在浏览器执行刷新操作的时候，利用storage对vuex中的数据进行中转暂存；

// 在页面根组件的created内进行数据中转、暂存处理；
  created(){
    // 监听浏览器刷新事件，浏览器执行刷新时，刷新之前将vuex中的数据做暂存处理；
    window.addEventListener('beforeunload',()=>{
      localStorage.setItem('store',JSON.stringify(this.$store.state));
    })
    // 刷新完成后会再次执行created等生命周期，所以这里判断如果本地存储内有对应数据则直接对vuex进行赋值处理
    if(localStorage.getItem('store')){
      // 注意：单纯的使用JSON.parse(JSON.stringify(...))会报错，所以此处使用replaceState进行赋值
      this.$store.replaceState(Object.assign({},JSON.parse(localStorage.getItem('store'))));
      // 这里赋值之后及时清除本地存储内的数据，以免暴露某些敏感数据
      localStorage.removeItem('store');
    };
  },

2、使用对应的持久化插件，比如vuex-persistedstate等；