您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vuex無法觀察到值變化如何解決”,在日常操作中,相信很多人在Vuex無法觀察到值變化如何解決問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Vuex無法觀察到值變化如何解決”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
在跨越主路由視圖時,由于Vuex的狀態(tài)值一直存儲在內(nèi)存中,所以在組件視圖重新載入時,可能會出現(xiàn)組件無法檢測到狀態(tài)值的變化,從而導(dǎo)致業(yè)務(wù)邏輯出現(xiàn)錯誤。
假定通用頭部組件有一個全局任務(wù)狀態(tài)值,其他的組件都要根據(jù)此任務(wù)值進行更新,更可能出現(xiàn)的情況是,任務(wù)狀態(tài)值是異步加載完成的,于是需要如此編寫業(yè)務(wù)邏輯:
computed : { task () { return this.$store.state.task } }, watch : { task : { deep: true, handler (val) { // 由于是異步載入,所以只能在狀態(tài)值的變化時執(zhí)行渲染操作 // 絕不可在mounted中執(zhí)行render方法 this.render(val) } } }
但是,由于上面的原因,第一次載入視圖時,因為Vuex的狀態(tài)值還沒有存儲在內(nèi)存中,所以渲染正常。發(fā)生了視圖切換后,雖然也重新載入了任務(wù)狀態(tài)值,但由于task并沒有發(fā)生變化,所以render方法不會被調(diào)用,于是組件無法完成渲染過程。
解決的辦法很簡單,強行觸發(fā)task值發(fā)生改變,方法是定義一個時間戳,如果覺得在時間戳的粒度仍然太粗,還可以組合使用隨機數(shù),如下:
watch: { taskId : { handler (val) { // 從v-model獲取到的新值 let taskId = this.taskId // 提交新值變化 this.$store.commit(TASK_ID, { id : taskId, // 添加時間戳 time : Date.now().valueOf(), // 添加隨機數(shù) random : Math.random() }) } } }
經(jīng)過上面的處理,只要發(fā)生taskId的賦值現(xiàn)象,那么一定會觸發(fā)Vuex的狀態(tài)變化,所以每次組件載入時或taskId的值發(fā)生變化時,render方法就一定會被執(zhí)行。
到此,關(guān)于“Vuex無法觀察到值變化如何解決”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。