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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM