Vuex是为Vue设计的状态管理器，但在使用时，有一个比较头疼的问题，即Vuex不能直接做数据的持久化，因为它的数据是保存在内存当中，当刷新页面时，内存即释放，我们需要持久保存的数据也就没有了。这时但我们可以借助于Web Storage来做持久化，但原生的Web Storage比较繁琐，这里我们来说一下Vuex的插件vuex-persistedstate。
安装：
npm install vuex-persistedstate --save
配置及使用：
在store的index.js文件中引入vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
定义vuex-persistedstate的配置信息
const vuexPersisted= new createPersistedState({
key: 'vuexPersistedTest', //定义KEY名
storage: window.localStorage, //定义信息存储模式：window.localStorage（默认）、sessionStorage、cookie
reducer: (state)=> ({ //reducer为定义是否为存储指定信息，如果存储全局信息，即可不用定义。
//因为是一个新手，又是自己看看视频的，所以，这里是我踩的一个比较苦逼的坑（也是自己发现及解决问题的能力不够）。当在modules下的文件中，定义了命名空间（即：namespaced: true）时，这里即需要对持久化的state进行对象分组，即与命名空间名称保持一致，否则，state状态数据将直接存储在Web Storage的key下，而不是存储在key下面的分组里，vuex-persistedstate在自动数据处理的时候就会出问题。（可以自己看一下在使用命名空间时，不定义reducer、定义reducer不进行对象分组、定义reducer进行对象分组时，Web Storage所存储的数据格式）
//方法一：进行对象分组
TestModules:{
testState:state.TestModules.testState,
},
//方法二：不进行对象分组
testState:state.TestModules.testState,
}),
});
插件定义
在Store中插件管理中进行定义
export default new Vuex.Store({
........
plugins:[vuexPersisted]
//注意：如果此刻想配置多个选项，将plugins写成一个一维数组，不然会报错。
})
还有一个其他的设置及配置，在这里就不说了，在网上搜一下都有好多的。
备注：window.localStorage与sessionStorage的主要区别是数据的生命周期不同。sessionStorage为当前会话期可用，window.localStorage为一直存在，除非清除，所以根据要求选择合适的 storage
