基于Vuex無法觀察到值變化的解決方法
在跨越主路由視圖時(shí)，由于Vuex的狀態(tài)值一直存儲(chǔ)在內(nèi)存中，所以在組件視圖重新載入時(shí)，可能會(huì)出現(xiàn)組件無法檢測(cè)到狀態(tài)值的變化，從而導(dǎo)致業(yè)務(wù)邏輯出現(xiàn)錯(cuò)誤。
假定通用頭部組件有一個(gè)全局任務(wù)狀態(tài)值，其他的組件都要根據(jù)此任務(wù)值進(jìn)行更新，更可能出現(xiàn)的情況是，任務(wù)狀態(tài)值是異步加載完成的，于是需要如此編寫業(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)值還沒有存儲(chǔ)在內(nèi)存中，所以渲染正常。發(fā)生了視圖切換后，雖然也重新載入了任務(wù)狀態(tài)值，但由于task并沒有發(fā)生變化，所以render方法不會(huì)被調(diào)用，于是組件無法完成渲染過程。
解決的辦法很簡(jiǎn)單，強(qiáng)行觸發(fā)task值發(fā)生改變，方法是定義一個(gè)時(shí)間戳，如果覺得在時(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)過上面的處理，只要發(fā)生taskId的賦值現(xiàn)象，那么一定會(huì)觸發(fā)Vuex的狀態(tài)變化，所以每次組件載入時(shí)或taskId的值發(fā)生變化時(shí)，render方法就一定會(huì)被執(zhí)行。
結(jié)論
為了滿足Vuex的值傳遞要求，尤其是需要強(qiáng)行刷新Vuex的緩存時(shí)，添加時(shí)間戳與隨機(jī)數(shù)不失為一種好的解決方案。
以上這篇基于Vuex無法觀察到值變化的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Vue3對(duì)比Vue2的優(yōu)點(diǎn)總結(jié)
vue3解決了vue2的一些缺陷與弊端，學(xué)習(xí)新的技術(shù)是很有必要的，本文總結(jié)了一些vue3的優(yōu)點(diǎn)，希望各位能盡快轉(zhuǎn)入vue3的使用中2021-06-06
這篇文章主要為大家介紹了TDesign在vitest的實(shí)踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue項(xiàng)目不能使用localhost訪問的解決
這篇文章主要介紹了vue項(xiàng)目不能使用localhost訪問的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了如何在vue中使用ant-design-vue組件,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
在vue中，子組件如果想修改父組件的變量，一般做法是通過綁定事件的方法，父組件向子組件傳遞修改變量的方法，子組件觸發(fā)修改變量的方法執(zhí)行，這種方式中規(guī)中矩；另一種方法是使用sync修飾符，此方法可以減少很多代碼量2022-08-08
下面小編就為大家分享一篇解決vue打包之后靜態(tài)資源圖片失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果
hover是css中的選擇器，用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。這篇文章主要介紹了vue使用v-for實(shí)現(xiàn)hover點(diǎn)擊效果,需要的朋友可以參考下2018-09-09
Vue向后端傳數(shù)據(jù)后端接收為null問題及解決
這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關(guān)于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08