在做vue項目的過程中有時候會遇到一個問題，就是進行F5頁面刷新的時候，頁面的數據會丟失，出現這個問題的原因是因為當用vuex做全局狀態管理的時候，store中的數據是保存在運行內存中的，頁面刷新時會重新加載vue實例，store中的數據就會被重新賦值，因此數據就丟失了，解決方式如下：

方法1、利用localStorage/sessionStorage將數據儲存在外部，做一個持久化儲存，通過監聽beforeunload事件來進行數據的localStorage存儲，beforeunload事件在頁面刷新時進行觸發，具體做法是在App.vue的created()周期函數中下如下代碼：

export default {
   name: 'App',
   created () {    
       //在頁面加載時讀取localStorage里的狀態信息
       if (window.localStorage.getItem('list')) {
          //this.$store.replaceState()替換 store 的根狀態
          this.$store.replaceState(Object.assign({}, this.$store.state, 
          JSON.parse(window.localStorage.getItem('list'))))
      }
          //在頁面刷新時將vuex里的信息保存到localStorage里
          window.addEventListener('beforeunload', () => {
          window.localStorage.setItem('list', JSON.stringify(this.$store.state))
      })
  }
}    

　方法2：由此得知計算屬性的結果會被緩存，也就是說在有緩存的情況下，computed會優先使用緩存，于是也可以在state數據相對應的頁面這樣寫：

computed:{
   orderList() {
       return this.$store.state.orderList
   }
}

　　

　

總結

以上是生活随笔為你收集整理的vue刷新页面，数据不丢失的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。