解决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:''
    }
}

 

posted @ 2021-04-19 15:05  ssjd  阅读(651)  评论(0编辑  收藏  举报