Correct way to validate and mutate object properties in vuex

I’ve run into some validation issues (mine, not vuex’s) when using vuex, and I’m wondering if I am treating object properties incorrectly with respect to the vuex.

For example, if I have an email property in a user object, I am mutating it from the form to vuex via a v-model to a computed property:

 <v-text-field
    v-model="profileEmail"
    :rules="$ruleEmail"
  />
profileEmail: {
   get() {
       return this.activeUser.email
   },
   set(value){
       this.$store.commit(SET_ACTIVE_USER_PROP, {
          prop: "email",
          value: value
    });
  }
},

This works fine, the property updates correctly and as expected. The Vuetify rule attached to the component also correctly enforces a correct email address when the whole form is submitted and blocks the vuex action of updating the entire user model in the DB.

The issue that I have run into is that the field validation does not stop the “email” field from mutating the vuex store, even if it is invalid. Yes, I can stop the form being submitted via the Vuetify rule, but a user could potentially enter an invalid email address (mutating the prop), then navigate to another part of the application and trigger a vuex action there (for example, when updating some different user preferences).

Of course, I can add the same validation in the set() method for the computed property, but it seems like double handling, so am wondering if my whole approach is actually correct.

This is a contrived example, the issue applies to a more complex object with many properties and different validation rules within the code.

I’m not sure whether validation is really the issue here. Don’t you have the same problem even if the value is valid? All changes are immediately ‘saved’ in the store, even if the user doesn’t actually save them to the database. Navigating to another part of the application will then see that changed-but-unsaved values.

You should consider whether using the store at all is justified in this case. Should edits to the objects be propagated throughout your application immediately, or only after clicking Save? Even if the store is used to load the initial object and to save the finished object, perhaps you should keep a separate copy of the data within your form for editing purposes?

Generally I try to keep my store in sync with my database, so that nothing gets written to state unless it has also been sent to the server. This is what most of the UI will be expecting, for anything in the store to match what’s in the database. Any part of the UI that wants to show something different should handle it locally.

Thank you, that is exactly the clarification I was seeking. I suppose it’s best to create an object in data, copy the store object to that on instantiation and send that object to the store after validation?