html5 - vuex 裡的資料遺失?

Question

#這是我在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

發現有資料 是一個物件.
接下來,比較詭異的是我在一個元件用計算屬性 想得到 vuex的資料,程式碼如下

##最後,我在vue的檢查工具裡查看組件裡的回傳的vuex的屬性如下

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

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

Answer 1

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

。

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

是有值的。

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

其中，Devtools裡讀取到的VueX的值是mutation

的部分，Vue透過呼叫action改變VueX裡的mutation，mutaion透過觸發狀態的改變來更新Vue裡面的資料。

顯然，第一個問題有可能是VueX裡的mutation觸發狀態改變失效，或是狀態改變並未成功更新Vue中的資料所導致的。 🎜