解決頁面刷新後vuex數據丟失
在vue項目中使用vuex來記錄一些狀態時發現按F5刷新頁面後vuex裏面的數據會丟失.因爲js運行的代碼都是存儲在內存中.刷新頁面內存會被釋放,所以這些數據都會丟失,只能用h5提供的api:localStorage或者sessionStorage來記錄頁面刷新前的vuex狀態.
兩者大致區別是:localStorage沒有時間期限,除非將它移除,sessionStorage即會話,當瀏覽器關閉時會話結束,有時間期限
我這裏使用localStorage來記錄
在vue註冊頁面更新前事件 在事件裏面處理vuex的狀態:
beforeUpdate(){
var type = this.$store.state.movieRouteType;
localStorage.setItem('changeMoiveType',type)
}
使用localStorahe記錄刷新前記錄一下,確保狀態不丟失.直接使用localStorage.setItem('xxx',value)即可保存.獲取時使用:localStorage.getItem('xxx').