解决VUEX中刷新数据不存在问题
监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStroage中。页面打开之后,判断sessionStorage中是否存在state对象,如果存在,则说明页面是被刷新过,将sessionStorage中存的数据取出来,给vuex中的stage赋值,如果不存在,说明是第一次打开,则取vuex中定义的state初始值。
在App.vue中增加监听刷新事件
export default { name: 'app', mounted() { //监听刷新事件 window.addEventListener('unload',this.saveState); }, methods:{ //sessionStorage只能存入字符串,所以要先把数据转成字符串 saveState(){ sessionStorage.setItem('state',JSON.stringify(this.$store.state)) } } }
修改store/index.js中的state
const state = sessionStorage.getItem('state')?JSON.parse(sessionStorage.getItem('state')):{ user:{ name:'' } }