search

nuxt / devtools

Unleash Nuxt Developer Experience
https://devtools.nuxt.com
MIT License
2.87k stars 160 forks source link

fix: populate useState reactively in devtools #663

Open hichem-dahi opened 4 months ago

hichem-dahi commented 4 months ago

fixes #643

kleinpetr commented 3 months ago

any update here?

antfu commented 3 months ago

I don't think we should clone the data and update the clone eagerly - it would be very inefficient and could cost extra memory. The root cause is that we didn't properly trigger the data when they updates, but also because we are dealing with multiple Vue instances (one in host, one in devtools, where watching on a forgien reactive object won't triggers properly. I think this would need a fix with another approach

hichem-dahi commented 3 months ago

@antfu, I've made it possible to update only the necessary nested properties using the deepSync function. Can you check?

hichem-dahi commented 3 months ago

@antfu I've removed cloning. I've used toRefs(payload.state) to reference the objects. It seems to be working.

antfu commented 3 months ago

Looks great; I will test it a bit. Thanks a lot for being patient on this!

antfu commented 3 months ago

I looked into it, but it seems that using toRef in template isn't a good practice. I end up with a different approach: 418a22ed624584a25eab2ed4880147e6d572eb32, which is released as v1.3.9. Please give it a try and let me know if it solves your cases. Thanks!

hichem-dahi commented 3 months ago

I left a comment here. It solves the initial issue. However, when modifying from the StateEditor, the change isn't synced.