Vuex無法觀察到值變化如何解決

這篇文章主要介紹“Vuex無法觀察到值變化如何解決”，在日常操作中，相信很多人在Vuex無法觀察到值變化如何解決問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vuex無法觀察到值變化如何解決”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在跨越主路由視圖時，由于Vuex的狀態值一直存儲在內存中，所以在組件視圖重新載入時，可能會出現組件無法檢測到狀態值的變化，從而導致業務邏輯出現錯誤。

假定通用頭部組件有一個全局任務狀態值，其他的組件都要根據此任務值進行更新，更可能出現的情況是，任務狀態值是異步加載完成的，于是需要如此編寫業務邏輯：

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

但是，由于上面的原因，第一次載入視圖時，因為Vuex的狀態值還沒有存儲在內存中，所以渲染正常。發生了視圖切換后，雖然也重新載入了任務狀態值，但由于task并沒有發生變化，所以render方法不會被調用，于是組件無法完成渲染過程。

解決的辦法很簡單，強行觸發task值發生改變，方法是定義一個時間戳，如果覺得在時間戳的粒度仍然太粗，還可以組合使用隨機數，如下：

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

經過上面的處理，只要發生taskId的賦值現象，那么一定會觸發Vuex的狀態變化，所以每次組件載入時或taskId的值發生變化時，render方法就一定會被執行。

到此，關于“Vuex無法觀察到值變化如何解決”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！