Vee-validate: how to pass error bag to vuex?

[DaumantasUrb]

Versions:

• VueJs: 2.5.6
• Vee-Validate: vee-validate v2.0.0-rc.27
  

  Description:

I am looking to modify this app https://github.com/anindya-dhruba/laravel-vue-spa to be able to use vee validate and load errors from the vuex module

[psychonetic]

@DaumantasUrb
I created something similiar. Instead of passing the errors from vee-validate to vuex, I do the other way around. I am also using laravel as a backend. If you want I can share my code with you.

On the backend side I modify the array, which comes back from laravels validation and pass it to the frontend. On frontend side those errors are going to vuex. If there are new messages, I add them to vee validates error array. That works actually great for me!

I will update my post and show you my modifcations in a gist.

EDIT:

https://gist.github.com/psychonetic/db0fb8bac8ce8748c675f016a46b8839

Just extend your FormRequests from my CoreFormRequest, add the formValidiation mixin to your components, which are using validation and add the formError.js module to your store.
IMPORTANT: Only those validation rules, which are in the keepServerErrors array will be added. (Name of my veeValidate error array is veeErrors)

[psychonetic]

@DaumantasUrb See my updated answer :)

[logaretm]

@psychonetic Thanks for your reply, I hope I will be able to provide an out of the box solution for Vuex soon.

[Chris1904]

I asked myself the question, so for anyone getting redirected here from Google, this is my solution:

Whichever component has access to the error bag, set up a watcher:

watch: {
    errors: {
        handler: function (errorBag) {
            console.log('errorBag', errorBag);
            console.log('this.errors.any() ', this.errors.any());

            this.anyFormErrors(this.errors.any());
        },
        deep: true
    }
},

methods: mapActions(['anyFormErrors']),

anyFormErrors() just commits the mutation like commit('anyFormErrors', payload).

It's a simple and fast approach to making the error bag (in my case I just needed access to use the boolean) available in Vuex.