解決vuex的數據刷新(F5)后會被初始化的問題


介紹一個vuex的數據刷新(F5)后會被初始化的問題處理的插件:vuex-localstorage

實現的原理大概就是監聽瀏覽器的刷新,關閉事件,把vuex的值存儲到本地localstorage,刷新完成后再把本地存儲的值賦值會到vuex,並把本地清空,所以對應監聽瀏覽器頁面的加載,關閉,刷新事件很有必要呢

原作者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309

  頁面加載時只執行onload

  頁面關閉時只執行onunload

  頁面刷新時先執行onbeforeunload,然后onunload,最后onload。

  結論是:

  //對於ie,谷歌,360:

  //頁面加載時只執行onload

  //頁面刷新時,刷新之前執行onbeforeunload事件,在新頁面即將替換舊頁面時onunload事件,最后onload事件。

  //頁面關閉時,先onbeforeunload事件,再onunload事件。

  //對於火狐:

  //頁面刷新時,只執行onunload;頁面關閉時,只執行onbeforeunload事件

可以自己去體驗一下額

created(){
    //在頁面刷新時將vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
    //要保存到本地的數據     ... }) }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM