問題描述

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

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

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

可以看到有這個deviceTypeId數(shù)據(jù).顯示出來了

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

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

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

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

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

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

問題解答

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

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

我借用一下官網(wǎng)對于VueX結(jié)構(gòu)的圖：

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

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