[Vuejs]-How to use RESTful API with Vuex and Axios for Dashboard

by

0đź‘Ť

âś…

In your template:
<form action="" v-on:submit.prevent="submitParticipant">

Then, you have to create a submit method in your “New Participant” component, for example:

submitParticipant() {
   this.$store.dispatch('addParticipant', this.participant);
}

or:

submitParticipant() {
   this.$store.dispatch('participantModule/addParticipant', this.participant);
}

if your store is divided into modules and addParticipant is kept in participantModule.

Considering you keep your currently edited participant in your component’s data:

data() {
   return {
      participant: {} 
   }
}

then your addParticipant action in store would look like this:

addParticipant({ commit }, participant) {
   axios.post('/dash/participants', participant)
        .then(response => {
           console.log(response);
           commit('addParticipants', participant)
         })
        .catch(error => console.log(error));
}

Leave a comment