I'm working on a vue app that uses vuex and gets objects from an api. The tables have paging and fetch batches of objects from the api, sometimes including related entities as nested objects. The UI allows some editing via inputs in a table, and adds via modals.

When the user wants to save all changes, I have a problem: how do I know what to patch via the api?

• Idea 1: capture every change on every input and mark the object being edited as dirty
• Idea 2: make a deep copy of the data after the fetch, and do a deep comparison to find out what's dirty
• Idea 3: this is my question: please tell me that idea 3 exists and it's better than 1 or 2!

If the answer isn't idea 3, I'm really hoping it's not idea 1. There are so many inputs to attach change handlers to, and if the user edits something, then re-edits back to its original value, I'll have marked something dirty that really isn't.

The deep copy / deep compare at least isolates the problem to two places in code, but my sense is that there must be a better way. If this is the answer (also hoping not), do I build the deep copy / deep compare myself, or is there a package for it?

CodePudding user response：

It looks like you have the final state on the UI and want to persist it on the server. Instead of sending over the delta - I would just send over the full final state and overwrite whatever there was on server side

So if you have user settings - instead of sending what settings were toggled - just send over the "this is what the new set of settings is"

CodePudding user response：

Heavy stuff needs to be done on the server rather than the client most of the time. So I'll follow the answer given by Asad. You're not supposed to make huge objects diffs, it's 2022 so we need to think about performance.

Of course, it also depends of your app, what this is all about. Maybe your API guy is opposed to it for a specific reason (not only related to performance). Setup a meeting with your team/PO and check what is feasible.

You can always make something on your side too, looping on all inputs should be feasible without manually doing that yourself.

TLDR: this needs to be a discussion in your company with your very specific constrains/limitations. All "reasonable solutions" are already listed and you will probably not be able to go further because those kind of "opinion based" questions are not allowed anyway on SO.