基于Vuex無(wú)法觀察到值變化的解決方法

在跨越主路由視圖時(shí)，由于Vuex的狀態(tài)值一直存儲(chǔ)在內(nèi)存中，所以在組件視圖重新載入時(shí)，可能會(huì)出現(xiàn)組件無(wú)法檢測(cè)到狀態(tài)值的變化，從而導(dǎo)致業(yè)務(wù)邏輯出現(xiàn)錯(cuò)誤。

假定通用頭部組件有一個(gè)全局任務(wù)狀態(tài)值，其他的組件都要根據(jù)此任務(wù)值進(jìn)行更新，更可能出現(xiàn)的情況是，任務(wù)狀態(tài)值是異步加載完成的，于是需要如此編寫(xiě)業(yè)務(wù)邏輯：

computed : {
 task () {
 return this.$store.state.task
 } 
},
watch : {
 task : {
 deep: true,
 handler (val) {
 // 由于是異步載入，所以只能在狀態(tài)值的變化時(shí)執(zhí)行渲染操作
 // 絕不可在mounted中執(zhí)行render方法
 this.render(val)
 }
 } 
}

但是，由于上面的原因，第一次載入視圖時(shí)，因?yàn)閂uex的狀態(tài)值還沒(méi)有存儲(chǔ)在內(nèi)存中，所以渲染正常。發(fā)生了視圖切換后，雖然也重新載入了任務(wù)狀態(tài)值，但由于task并沒(méi)有發(fā)生變化，所以render方法不會(huì)被調(diào)用，于是組件無(wú)法完成渲染過(guò)程。

解決的辦法很簡(jiǎn)單，強(qiáng)行觸發(fā)task值發(fā)生改變，方法是定義一個(gè)時(shí)間戳，如果覺(jué)得在時(shí)間戳的粒度仍然太粗，還可以組合使用隨機(jī)數(shù)，如下：

watch: {
 taskId : {
 handler (val) {
 // 從v-model獲取到的新值
 let taskId = this.taskId
 // 提交新值變化
 this.$store.commit(TASK_ID, 
 {
 id : taskId,
 // 添加時(shí)間戳
 time : Date.now().valueOf(),
 // 添加隨機(jī)數(shù)
 random : Math.random()
 })
 }
 }
}

經(jīng)過(guò)上面的處理，只要發(fā)生taskId的賦值現(xiàn)象，那么一定會(huì)觸發(fā)Vuex的狀態(tài)變化，所以每次組件載入時(shí)或taskId的值發(fā)生變化時(shí)，render方法就一定會(huì)被執(zhí)行。

結(jié)論

為了滿(mǎn)足Vuex的值傳遞要求，尤其是需要強(qiáng)行刷新Vuex的緩存時(shí)，添加時(shí)間戳與隨機(jī)數(shù)不失為一種好的解決方案。

以上這篇基于Vuex無(wú)法觀察到值變化的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com