一、頁面重繪時，如何保持原有vuex中的state資訊
頁面重繪后，原有的 vuex 中的 state 會發生改變，如果在頁面重繪之前，可以將 state 資訊保存，頁面重新加載時，再將該值賦給 state，那么該問題即可解決，
1、localstorage
可以使用 localstorage 來保存資訊，
【在某組件中添加如下鉤子函式，比如 App.vue中】
created() {
//在頁面加載時讀取localStorage里的狀態資訊
if (localStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
}
//在頁面重繪時將vuex里的資訊保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
注：
this.$store.replaceState() 用于替換 store 的資訊（狀態合并），
Object.assign(target, ...source) 將source的值 賦給 target，若有重復的資料，則覆寫，其中...表示可以多個source，
JSON.stringify() 用于將物件轉為 JSON
JSON.parse() 用于將 JSON 轉為物件
注意：
若有兩個組件，當呼叫 localstorage 的值，可能會出現問題，
如下圖，Main.vue 中 每次重繪頁面會 觸發 localstorage 操作，
開始 localstorage 中沒值，某用戶通過 Login.vue 組件 進入 Main.vue 組件并重繪頁面后，localStorage 會記錄當前用戶相關的 state 資訊，
直接在瀏覽器中切換路徑到Login.vue，當另外一個用戶通過 Login.vue 并進入 Main.vue 時，此時獲取的就是上一個用戶的資訊，這樣肯定會出問題（我遇到的一個坑，大致意思就是這樣），
一個暴力的解決思路，在Login.vue中 直接將上一個用戶快取的資訊給洗掉，
此時 localStorage 沒有了上個用戶的資訊，
【Login.vue】
created() {
// 進入畫面前，移除主頁面保存的 state 資訊
localStorage.removeItem("store")
}
然后只在Main組件重繪時 使用 localStorage 記錄資訊，
【Main.vue】
created() {
//在頁面加載時讀取localStorage里的狀態資訊
if (localStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
}
//在頁面重繪時將vuex里的資訊保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
2、sessionStorage
也可以使用 sessionStorage 來保存資訊，
【在某組件中添加如下鉤子函式，比如 App.vue中】
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))
})
}
3、localstorage 與 sessionStorage 的區別
（1）localstorage 與 sessionStorage 都是客戶端用于存盤資料的，
（2）localStorage是沒有失效時間的，sessionStorage的宣告周期是瀏覽器的生命周期，
（3）當瀏覽器關閉時，sessionStorage的資料將清空，而localStorage資料只要不通過代碼特意的洗掉或手動洗掉，是永久保存的，
（4）若想清除localstorage 的資料，
localStorage.removeItem(key) 清除一條資料
localStorage.clear() 清除全部的資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/180943.html
標籤：JavaScript
上一篇：利用Echarts實作全國各個省份資料占比，圖形為中國地圖
下一篇：vue生命周期的理解