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]})