關於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中取值。

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