基于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é)論
為了滿足Vuex的值傳遞要求，尤其是需要強(qiáng)行刷新Vuex的緩存時(shí)，添加時(shí)間戳與隨機(jī)數(shù)不失為一種好的解決方案。
以上這篇基于Vuex無(wú)法觀察到值變化的解決方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3?element-plus?實(shí)現(xiàn)表格數(shù)據(jù)更改功能詳細(xì)步驟
這篇文章主要介紹了vue3 element-plus實(shí)現(xiàn)表格數(shù)據(jù)更改功能,本文分步驟結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)PC端錄音功能的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法
這篇文章主要介紹了在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題
這篇文章主要介紹了解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue 項(xiàng)目中使用websocket的正確姿勢(shì)
這篇文章主要介紹了vue 項(xiàng)目中使用websocket的實(shí)例代碼，通過(guò)實(shí)例代碼給大家介紹了在utils下新建websocket.js文件的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了vue攔截器及請(qǐng)求封裝代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue3使用v-html實(shí)現(xiàn)文本關(guān)鍵詞變色處理
遍歷文本內(nèi)容,找到關(guān)鍵詞,并使用某種方法更改其字體樣式,經(jīng)過(guò)搜尋資料決定采用v-html實(shí)現(xiàn),但是v-html本身并不安全,有安全性風(fēng)險(xiǎn)且影響性能,所以謹(jǐn)慎使用,本文給大家介紹了Vue3使用v-html實(shí)現(xiàn)文本關(guān)鍵詞變色處理,需要的朋友可以參考下2024-06-06
Vue+Element實(shí)現(xiàn)封裝抽屜彈框
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Element實(shí)現(xiàn)簡(jiǎn)單的抽屜彈框效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
mockjs是用來(lái)模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒(méi)有開(kāi)發(fā)出來(lái)時(shí)獨(dú)立開(kāi)發(fā)。這篇文章主要介紹了vue項(xiàng)目中mock.js的使用,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了如何在Vue3中使用富文本編輯器,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考一下2024-01-01