Our team has developed a Vuex module to store user-input data from a form. If the form has unsaved changes and the user tries to leave the page, we want to warn them so they can decide whether or not to proceed.
It would be convenient if we could simply use a built-in getter to check for changes. Something like this:
if (this.$store.getters['myModule/hasChanged']) {
// alert user
} else {
// allow user to continue
}
We have discussed watching the state closely and creating a hash every time there is a mutation, but we are concerned about the potential performance issues that may arise from that approach.
We have also thought about using a boolean flag to indicate whether changes have occurred, either in the component holding the form or within the state itself. However, we prefer not to hard-code such a value.
Is there a standard practice for determining if the state of a specific module has changed?
Thank you.