建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要為大家展示了“Vuex無法觀察到值變化怎么辦”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“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í)行。
以上是“Vuex無法觀察到值變化怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
當(dāng)前標(biāo)題：Vuex無法觀察到值變化怎么辦-創(chuàng)新互聯(lián)
標(biāo)題URL：http://www.dlmjj.cn/article/dgihgh.html
