問題描述

這是我在acrions里請求 一個設備的詳細信息. 首先我用 console.log(res.data.data)打印出了 res.data.data

很奇怪的是 deviceTypeId這個屬性是 undefined.其他屬性都沒問題.

當用console.log(JSON.stringify(res.data.data))如下圖

可以看到有這個deviceTypeId數據.顯示出來了

疑問一: 為什么 直接log(). 和 JSON.stringify結果不一樣

帶著疑問,我用vue的檢查工具看了下vuex.的deviceTypeId

發(fā)現(xiàn)有數據 是一個對象.接下來,比較詭異的是我在一個組件用計算屬性 想得到 vuex的數據,代碼如下

最后,我在vue的檢查工具里查看組件里的返回的vuex的屬性如下

這里又變成undefined了...... 而且其他值都可以顯示.

問題二 ..這 到底是咋回事呢? 有某有好滴調試方法呢?

問題解答

我先來回答你第二個問題好了，computed的屬性計算來源是根據本地的data和props的值，屬于本地的數據，所以里面的deviceId是undefined。

然后，再回頭看下第一個問題，其實根據上面第二個問題的答案，可以推測，出現(xiàn)這個問題的原因是，本地數據中的deviceId是undefined，而VueX中數據的deviceId是有值的。

我借用一下官網對于VueX結構的圖：

其中，Devtools里讀取到的VueX的值是mutation的部分，Vue通過調用action改變VueX里的mutation，mutaion通過觸發(fā)狀態(tài)的改變來更新Vue里面的數據。

顯然，第一個問題有可能是VueX里的mutation觸發(fā)狀態(tài)改變失效，或者是狀態(tài)改變并未成功更新Vue中的數據導致的。