vue通过vuex-persistedstate持久化数据存储

在vue项目中，我们经常会通过vuex来存储和管理全局数据。但是通过vuex存储全局数据时，会有这么一个问题，如果用户刷新了网页，那么我们通过vuex存储的全局数据就会被全部清空，比如用户信息等。

这个时候，我们就会有全局数据持久化存储的需求。首先我们想到的就是Storage，localStorage是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储，当然也可以使用sessionStorage来作为存储，在浏览器对象关闭之后就会释放浏览器窗口中的缓存数据。

但是在我们已经使用vuex来管理和存储全局数据的基础上，再去使用localStorage来读写数据，这样不仅是工作量巨大，还容易出错。那么有没有结合vuex来达到持久数据存储功能的插件呢？当然，它就是vuex-persistedstate。vuex-persistedstate会将vuex的store中的数据缓存到浏览器的localStorage中。
使用方法：
1.安装插件

cnpm install vuex-persistedstate

2.在store中引入

import createPersistedState from 'vuex-persistedstate';

3.在store中配置需要做存储的数据，按需存储

plugins: [createPersistedState({
        storage: window.sessionStorage,
        reducer (val) {
            return {
                guideId: val.guideId,
                _StaffLoginInfo: val._StaffLoginInfo
            };
        }
    })]

4.在组件中直接引用全局管理的数据

import {mapState} from 'vuex';
computed: {
      ...mapState({
        userInfo:state=>state._StaffLoginInfo
      })
  },

接下来就可以在组件中使用了，随便刷新也不会有任何问题了，记录一下使用过程！