解決vue單頁面應用刷新網頁後state數據丟失問題

iview實現單頁面的數據管理

很多數據管理，各種藉口調用，F5刷新後全變成空白表格

解決方法

在主頁面加載時去讀取sessionStorage，頁面重載時存儲整個store到sessionStorage，可以實現數據本地化存儲，解決刷新丟失數據的問題

  <div id="app">
    <router-view/>
  </div>
</template>

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

參考