VueJS Reactivity Problem #Vue #Reactive #Observe

[korhanozbek44]

Vue.js have a reactivity system. This system allows to track object changes.

Why
Vue.js cannot track Parse Objects. Because objects creating out of Vue.js. Because of that reactivity system cannot understand changes.

What
Parse's ObjectsState hashmap is handling objects values. But not creating or editing by Vue.js

How
If Vue.js can set initial value of Parse's ObjectsState hashmap object, Vue's reactivity system can track change. Just add this code block to main.js in Vue.js

import { state } from 'parse/lib/browser/SingleInstanceStateController'
Vue.set(state, 'className', '');

So i exported the objectState hashmap, imported in Vue app and has been set the initial value.

[flovilmart]

Can you perhaps explain how, why, and what?

[codecov]

Codecov Report

Merging #699 into master will decrease coverage by 0.03%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##           master     #699      +/-   ##
==========================================
- Coverage   89.04%   89.01%   -0.04%     
==========================================
  Files          53       53              
  Lines        4648     4650       +2     
  Branches     1072     1072              
==========================================
  Hits         4139     4139              
- Misses        509      511       +2

Impacted Files	Coverage Δ
src/SingleInstanceStateController.js	94.44% <0%> (-2.7%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8625ae2...c080cd3. Read the comment docs.

[korhanozbek44]

Sorry for incomprehensible description of commit. I updated the description. @flovilmart
thanks for help @bugra9

[flovilmart]

This is very dangerous, as:

• the state object may be overridden/replaced internally by the Parse SDK
• you end up with two tracking systems, one managed by vue, one by the Parse SDK.

I am not a big fan of this overall.

Can we have this exported as a function instead of a variable?

Also, I don’t believe Vue réactivity system is designed to track at once all your objects ever fetched by your client app, but only a selected few that are required to update your component.

Let’s say you fetch 500 objects, all those 500 will be tracked, then you move to another component on screen and fetch another 500, and show only those extra 500, now you’re tracking changes in 1000 etc... I am not sure this is the behavior you want.

[korhanozbek44]

Ok. I will refactor code and adding a function which is this issue as soon as. Can you give me a time ? @flovilmart

[flovilmart]

This is not what I meant

I meant

export getState() { return objectState }

Also, did you get a chance to read what I mentioned about this solution? Can you provide more elements regarding my concerns?

[dplewis]

@dreadful44 Ping? Pong?

[korhanozbek44]

Sorry. I can't write for a long time. if the code which is my wrote be merge to the master, vue track all object of parse. This is wrong solution. When vue track all object, browser is getting slow. I'm closing merge request. Thank you.