cretueusebiu / vform

Handle Laravel-Vue forms and validation with ease.
https://vform.vercel.app
MIT License
610 stars 122 forks source link

Can it be used with Vuex ? #112

Closed iamraju closed 3 years ago

iamraju commented 3 years ago

Is there a way to use this with Vuex ? Any examples ?

bit9labs commented 3 years ago

I was wondering this same thing as I am starting to duplicate a lot of code. This would be nice. Do you think it's proper to pass the entire form object to the action?

In the component:

this.$store.dispatch("updateUser", { form: this.form });

In the store:

async updateUser ({ commit }, form) {
  const { data } = await form.submit('post','/api/v1/users');
  commit(types.UPDATE_SUCCESS, { user: data.user });    
}
ianalfred commented 3 years ago

Is there a way to use this with Vuex ? Any examples ?

I'm also stuck on this.

Snakzi commented 3 years ago

Hello, this should work.

update () {
  this.form.patch('/settings/profile').then(({ data: user }) => {
    this.$store.dispatch('auth/updateUser', { user })
  })
}
ianalfred commented 3 years ago

Thanks. I'll try it out.

On Tue, Mar 23, 2021, 19:04 Snakzi @.***> wrote:

Hello, this should work.

update () { this.form.patch('/settings/profile').then(({ data: user }) => { this.$store.dispatch('auth/updateUser', { user }) }) }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/cretueusebiu/vform/issues/112#issuecomment-805026705, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKJUJK5ANBBHQUGA27EQJJLTFC3XXANCNFSM4SMIBISQ .

cretueusebiu commented 3 years ago

I usually do something like this:

// component.vue
export default {
  data: () => ({
    form: new Form({
      email: '',
      password: ''
    })
  }),

  methods: {
    async login () {
      await this.$store.dispatch('auth/login', this.form)
      // ...
    }
  }
}

// store module
export const actions = {
  async login ({ dispatch }, form) {
    const { data } = await form.post('/api/login')
    // do something with data
  }
}