[v4] Validation with Vuex

[subjectnull]

Is anyone able to offer guidance / a design pattern / an example of how to handle validation with Vuex?

For example

<template>
  <form>
    <input type="text" :value="name" @input="setName" />
    <input type="text" :value="address" @input="setAddress" />
  </form>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  computed: {
    ...mapState(["name","address"])
  },
  methods: {
    ...mapMutations({
      setName: "UPDATE_NAME",
      setAddress: "UPDATE_ADDRESS",
    }
  }
}
</script>

I've taken a look at the components introduction and the API reference but they both use examples with v-model for component state, so I'm not really sure how to proceed.

Apologies in advance if this is a newbie question; I'm relatively new to vee-validate!

[logaretm]

You could use "two-way computed properties" to use "v-model" with your state/mutations

Generally, I'm not a fan of using Vuex for forms.

[subjectnull]

Thanks @logaretm , I'll take a look!

Out of interest, why are you not a fan of Vuex for forms? As the author of vee-validate I'm assuming it's for good reasons and it'd be great to learn about your perspective!

[logaretm]

Well it depends on the product you are building, in general, most forms (login, sign up, address, whatever) doesn't really benefit much from having their state globally available to the rest of the app, and the rest of the app doesn't really care about form values.

So I strictly opt in to state management when:

• Multiple Components are interested in the same state
• The state makes "sense" to be global, for example the currently authenticated user is a good piece of data to keep available globally.

So for forms, I prefer to keep their state empheral, unless their state is accessed anywhere else you don't really need to use Vuex for your forms, or anything that's non-global to be specific. Still it depends on your product, I would imagine if you are building something like TypeForm or a Quiz app then maybe it may make sense then.

[subjectnull]

Solid reasoning with examples, thanks for your guidance! Much appreciated =)