基於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的值傳遞要求，尤其是需要強行重新整理Vuex的緩衝時，新增時間戳記與隨機數不失為一種好的解決方案。

以上這篇基於Vuex無法觀察到值變化的解決方案就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。