在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方法就一定會被執行。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

js中document.write與document.writeln的差異

##Javascript中prototype與__proto__的關係詳解

Node.JS循環刪除非空資料夾及子目錄下的所有檔案

以上是在Vuex中無法觀察到值變化的解決方法是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！