html5 - Data loss in vuex?

Question

This is the detailed information of a device I requested in acrions. First I used console.log(res.data.data) to print out res.data.data

The strange thing is that the deviceTypeId attribute is undefined. The other attributes are fine.

When using console.log(JSON.stringify(res.data.data)) as shown below

You can see that there is this deviceTypeId data. It is displayed

• Question 1: Why is the result of direct log(). different from JSON.stringify

With doubts, I used vue’s inspection tool to check the deviceTypeId of vuex.

I found that the data is an object.
Next, what is weird is that I use calculated properties in a component to get the vuex data. The code is as follows

Finally, I checked the returned vuex properties in the component in the vue inspection tool as follows

It becomes undefined again...and other values ​​can be displayed.

• Question 2..What is going on? Does anyone have a good debugging method?

Answer 1

Let me answer your second question first. The attribute calculation source of computed is based on the local data and props values, which are local data, so the deviceId inside is undefined.

Then, let’s look back at the first question. In fact, based on the answer to the second question above, it can be speculated that the reason for this problem is that the deviceId in the local data is undefined, while the deviceId in the VueX data is valuable.

I borrow the diagram of the VueX structure from the official website:

Among them, the value of VueX read in Devtools is the part of mutation. Vue changes the mutation in VueX by calling action, and mutaion updates the data in Vue by triggering changes in state.

Obviously, the first problem may be caused by the mutation triggering the state change in VueX, or the state change does not successfully update the data in Vue.