vue更改了數據但是視圖卻沒有更新
阿新 • • 發佈：2018-07-31
create nop 標記 pre 問題 之路 變量賦值 brush ndis
今日總結：讓鉤子函數背鍋的一上午，跪求原諒
需求：頁面刷新時，保留當前頁面的選中狀態 解決思路：在data裏設置一下初始值，保證首次進入有默認選中狀態，其次再操作時，把選中的狀態存sessionStorage。在created裏為標記狀態的變量賦值，優先sessionStorsge取，取不到就設置為默認值。 代碼：data() {
return {
thirdHidden: 2, // 二級菜單折疊還是隱藏 -1 折疊 order：顯示
isCheck: 1, // 二級菜單樣式 1 選中狀態 -1 不選中狀態
isactive: 2, // 一級菜單樣式 1 選中狀態 -1 不選中狀態
currenOpen: 2, // 二級菜單顯示還是隱藏 -1 隱藏 值為對應order：顯示
isFold: false,
secondIsFold: false
}
},
created() {
this.isactive = sessionStorage.getItem(‘isactive‘) || 2
this.currenOpen = sessionStorage.getItem(‘currenOpen‘) || 2
this.thirdHidden = sessionStorage.getItem(‘thirdHidden‘) || 2
this.isCheck = sessionStorage.getItem(‘isCheck‘) || 1
}
後來發現一個很神奇的現象：刷新時，頁面可以拿到緩存裏的值，打印出來也是正確的。只是頁面內容不根據拿到的狀態值去渲染。。。怎麽刷新都不變。以下是我的爬坑之路：
- 以為是賦值的問題，把賦值後的變量打印出來看，還是正確的，就是找不到原因。。$set用於對象或數組，和現在的普通變量也沒關系啊
- 開始以為是鉤子函數的問題，以為是加載順序問題。所以挨個試：
- 直到突然一下，冥冥之中感覺到---好像是sessionStorage裏取的值的數據類型，所以趕緊打印，果然啊，好幾個小時問題竟然是數據類型惹的禍，sessionStorage取到的是String，實際頁面裏做判斷的是‘Number‘，對應不上，所以一直取得都是最開始的默認值
vue更改了數據但是視圖卻沒有更新