In my current project, I am developing a Vue application that utilizes Vuex to retrieve objects from an API. These objects are displayed in tables with paging functionality and are retrieved in batches from the API, sometimes containing nested entities. The user can edit the data via input fields within the table and add new entries through modals.
One challenge I face is determining which changes need to be sent back to the API for saving when the user decides to save all edits made.
- One approach would be to track every change on each input field and mark the corresponding object as "dirty."
- Another idea involves creating a deep copy of the fetched data and conducting a deep comparison to identify any dirty elements.
- However, I'm interested in exploring alternative solutions, hence my question: Is there an Idea 3 that offers a better approach than Idea 1 or Idea 2?
If neither Idea 3 nor Idea 2 prove to be the ideal solution, I truly hope it's not Idea 1. Managing change handlers for numerous input fields can become overly complex, especially if users revert their edits back to the original values.
The process of making a deep copy and performing a deep comparison at least confines the issue to two distinct areas of code. Nevertheless, I believe there must be a more efficient method out there. If this method turns out to be the best option (which I also hope isn't the case), should I develop the deep copy/deep compare functionality myself, or are there existing packages that could facilitate this task?