Vuex無法觀察到值變化的解決辦法

2021-08-04 09:26:19 字數 630 閱讀 3013

在跨越主路由檢視時,由於vuex的狀態值一直儲存在記憶體中,所以在元件檢視重新載入時,可能會出現元件無法檢測到狀態值的變化,從而導致業務邏輯出現錯誤。

假定通用頭部元件有乙個全域性任務狀態值,其他的元件都要根據此任務值進行更新,更可能出現的情況是,任務狀態值是非同步載入完成的,於是需要如此編寫業務邏輯:

computed :     

},watch :

}

}

但是,由於上面的原因,第一次載入檢視時,因為vuex的狀態值還沒有儲存在記憶體中,所以渲染正常。發生了檢視切換後,雖然也重新載入了任務狀態值,但由於task並沒有發生變化,所以render方法不會被呼叫,於是元件無法完成渲染過程。

解決的辦法很簡單,強行觸發task值發生改變,方法是定義乙個時間戳,如果覺得在時間戳的粒度仍然太粗,還可以組合使用隨機數,如下:

watch: )}}

}

經過上面的處理,只要發生taskid的賦值現象,那麼一定會觸發vuex的狀態變化,所以每次元件載入時或taskid的值發生變化時,render方法就一定會被執行。

為了滿足vuex的值傳遞要求,尤其是需要強行重新整理vuex的快取時,新增時間戳與隨機數不失為一種好的解決方案。

VUE 解決無法監聽陣列 物件的變化

1 vue能夠監聽陣列變化的場景 通過賦值的形式改變正在被監聽的陣列 通過splice index,num,val 的形式改變正在被監聽的陣列 通過陣列的push的形式改變正在被監聽的陣列 2 vue無法監聽的陣列變化的場景 通過陣列索引改變陣列元素的值 改變陣列的長度 3 vue解決無法監聽陣列變...

z index為負值的元素無法點選到的解決方法

最近做背投廣告,因為預設頁面沒有設定z index,發現如果將z index為負值的元素無法點選到,那麼解決方案就是將背投廣告z index設定為1,其它元素z index增加。假設有這樣乙個需求 header和主區域是原來就有的,www.cppcns.com現在要在頁面中加乙個背景圖,要求該背景圖...

flex公升級到4 5 無法解析的解決方案

畫出第二條y軸secondverticalaxis 但是4.1的時候已經提示棄用了。不推薦使用 請使用 verticalaxis in individual series 下面是解決方案 左軸 右軸 橫軸 曲線 下面是動態生成series,從資料庫中查詢,動態生成series 只提供部分 var a...