問(wèn)題描述

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

很奇怪的是 deviceTypeId這個(gè)屬性是 undefined.其他屬性都沒(méi)問(wèn)題.

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

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

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

帶著疑問(wèn),我用vue的檢查工具看了下vuex.的deviceTypeId

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

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

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

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

問(wèn)題解答

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

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

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

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

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