vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。

这里写目录标题

保存到浏览器缓存vuex-persistedstate插件vuex-persist 插件

保存到浏览器缓存

适用于保留一些登录信息

监听页面是否刷新，如果页面刷新了，将state对象存入到缓存中。页面打开之后，判断缓存中是否存在数据，如果存在，则说明页面是被刷新过的，将缓存中存的数据取出来给vuex中的state赋值。

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

vuex-persistedstate插件

直接将状态存入了缓存中，默认使用localStorage来固化数据

//安装npm i -S vuex-persistedstate//在vuex初始化时候，作为组件引入//src/store/index.jsimport createPersistedstate from 'vuex-persistedstate'import user from './modules/user'import homefrom './modules/home'export default new Vuex.Store({plugins: [createPersistedstate({storage:window.sessionStorage,//更改默认存储paths: ['user'，'home'] //存储指定模块，reducer(val) {//val 是由state里面所有的sate,不加reducer为全部return {// 只储存state中的assessmentDataassessmentData: val.assessmentData}}})]})

vuex-persist 插件

//安装npm install --save vuex-persist//src/store/index.jsimport VuexPersistence from 'vuex-persist'const vuexLocal = new VuexPersistence({storage: window.localStorage})const store = new Vuex.Store({plugins: [vuexLocal.plugin]})