关于vuex保存的东西刷新后消失的问题

在默认模式下,vuex中保存的东西会在刷新之后被清空,导致我们想用vuex存储一些状态,比如登录状态,都会受到很大的影响

解决问题的办法
第一步
在vue的store文件夹中,修改index.js改变正常的vuex定义state的方法

const store = new Vuex.Store({
  //  在state与保存的数据之间添加一个三目运算
	state: sessionStorage.getItem('state') ? 
	JSON.parse(sessionStorage.getItem('state')) : {
	ordergoods: {}
  }

还需要在vue的app.vue文件中作出这样的更改

mounted: function () {
     window.addEventListener('unload', this.saveState)
  },
  methods: {
    saveState () {
      sessionStorage.setItem('state', JSON.stringify(this.$store.state))
    }
  }

监听unload事件,该方法将会在页面被刷新的时候执行。
如果重载页面就把state存入sessionStorage,然后在需要state的时候从sessionStorage中取值。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章