介紹一個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",()=>{
//要保存到本地的數據 ... }) }