vue watch數據的方法被調用了兩次的問題

背景:路由結構/video/1.mp4,即/video是父路由,/1.mp4是/video的動態子路由,在/video父路由中會通過url的params獲取視頻信息,即通過/1.mp4獲取對應的視頻完整信息,然後通過props傳到動態子路由中,然後子路由通過接受到的視頻對象,進行展示

問題:當路由切換時,即當我點擊其他視頻時,導致動態子路由變化時,我監聽了/video父路由的變化並重新根據url的params獲取視頻對象,並自動通過props傳入子路由中,我在子路由中通過watch 視頻對象來進行一些操作,結果

watch: { 
  video () {
    console.log("test")
  }
}

 test被打印了兩次,通過一番查找,才發現,當子路由切換時,父路由/video中的data數據都會被初始化爲默認值,所以導致video對象變化了兩次,一次是因爲初始化被重置爲默認值空對象,一次是請求後的正確數據

結局: 將video對象存到vuex中,然後父路由將vuex中的video對象傳給子路由就行了

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章