How to pass parameters from Component to vuex in an Laravel and vuejs project?

Question

I am using in my project Vuex with modules and Axios to work with the API created in Laravel, how to pass parameters in an edition of a data recovered from an API I have my Store

export default {
    state: {
        items: {
            data: []
        },
    },
    mutations:{

    },
    actions:{
        editCategories(context, params)
        {
            context.commit('PRELOADER', true)
            return new Promise((resolve, reject)=>{
                    axios.put(`/api/v1/categorys/${id}`, params)
                    .then(response=>resolve())
                    .catch(error=>reject(error))
                    .finally(()=>{
                        context.commit('PRELOADER', false)
                    })
                })
        }
    },
    getters: {

    }
}

in my Component I am trying to pass the data to my call in the Api, but the following error is occurring

Vue warn]: Error in v-on handler: "TypeError: this.$store.dispatch(...).then(...).cath is not a function"

my Component basically is:

<template>
    <div>
        Editar
        <form v-on:submit.prevent="editForm">
           <input v-model="category.name" type="text">
           <button type="submit" class="btn btn-success">Cadastrar</button>
       </form>
    </div>
</template>
<script>
export default {
    props:{
        id:{
            require:true
        }
    },
    created(){
        this.$store.dispatch('loadCategorie', this.id)
        .then((response)=>{
            this.category = response
        })
        .catch((error)=>{
            console.log(error)
        })
    },
    data(){
        return {
            category:{
                name:''
            }
        }
    },
    methods:{
        editForm() {
            this.$store.dispatch('editCategories',this.id,{name: this.category.name})
           .then()
           .cath()
        }
    }
}
</script>

I believe the error is happening in:

 this.$store.dispatch('editCategories',this.id,{name: this.category.name})

how to pass these parameters correctly?

Answer 1

Only a lack of key for a certain value.

traded this:

this.$store.dispatch('editCategories',this.id,{name: this.category.name})

therefore:

this.$store.dispatch('editCategories',{id:this.id,name: this.category.name})

since it was not assigning any key, the value arrived as null.

"key":"value"

Answer 2

The menicon error is in the syntax. There is no Cath, the correct is catch.

editForm() {
  this.$store.dispatch('editCategories',this.id,{name: this.category.name})
  .then()
  .cath()
}