1. 程式人生 > >computed 和 watch 組合使用,監聽數據全局數據狀態

computed 和 watch 組合使用,監聽數據全局數據狀態

compute 返回 數據 state 技術分享 .com 實現 com nbsp

我要實現的就是,當接口返回數據時,我在任何組件中都能感知到到該數據的變化,然後根據業務邏輯進行處理、展示。

實現這個效果的方式很多,比如當接口返回數據後,就emit這數據,在另外組件中on接收渲染即可,但是我不想用這種,

所以就換了另外一種方式:當接口返回數據時,將數據commit到state,需要對其作出反應的組件中,使用computed將

計算屬性將混入到 Vue 實例中。同時使用watch對其屬性變化進行監聽,且進行相關處理。

相關代碼如下:

接口返回數據後,commit更新state中的數據。

技術分享圖片

mutations中的操作是:

技術分享圖片

需要對該變化作出反應的組件中,代碼如下,其中watch裏面可進行相應業務處理。

技術分享圖片

computed 和 watch 組合使用,監聽數據全局數據狀態