0 votes
in Education by (1.7m points)
I have two functions in my store, one that gets data by calling API and one that toggles change on cell "approved". Everything working fine, except that when I toggle this change it happens in database and I get the response that it is done but It doesn't update on UI.

I am confused, what should I do after toggling change to reflect change on UI, should I call my API from .then or should I call action method responsible for getting data from server.

export default {

  state: {

    drivers: {

      allDrivers:[],

      driversError:null

    },

    isLoading: false,

    token: localStorage.getItem('token'),

    driverApproved: null,

    driverNotApproved: null

  },

  getters: {

    driversAreLoading (state) {

      return state.isLoading;

    },

    driverError (state) {

      return state.drivers.driversError;

    },

    getAllDrivers(state){

      return state.drivers.allDrivers

    }

  },

  mutations: {

    getAllDrivers (state) {

      state.isLoading=true;

      state.drivers.driversError=null;

    },

    allDriversAvailable(state,payload){

      state.isLoading=false;

      state.drivers.allDrivers=payload;

    },

    allDriversNotAvailable(state,payload){

      state.isLoading=false;

      state.drivers.driversError=payload;

    },

    toggleDriverApproval(state){

      state.isLoading = true;

    },

    driverApprovalCompleted(state){

      state.isLoading = false;

      state.driverApproved = true;

    },

    driverApprovalError(state){

      state.isLoading = false;

      state.driverError = true;

    }

  },

  actions: {

    allDrivers (context) {

      context.commit("getAllDrivers")

      return new Promise((res,rej)=>{

        http.get('/api/admin/getAllDrivers').then(

          response=>{

            if (response.data.success){

              let data=response.data.data;

                data=data.map(function (driver) {

                return {

                  /* response */

                };

              });

              context.commit("allDriversAvailable",data);

              res();

            }else {

              context.commit("allDriversNotAvailable",response.data)

              rej()

            }

          })

          .catch(error=>{

            context.commit("allDriversNotAvailable",error.data)

            rej()

          });

      });

    },

    toggleDriverApproval (context, payload){

      return new Promise((res, rej)=>{

        http.post("/api/admin/toggleDriverApproval",{

          driver_id: payload

        })

        .then( response => {

          context.commit('driverApprovalCompleted');

          res();

        }).catch( error =>{

          context.commit('driverApprovalError');

          rej()

        })

      })

    }

  }

}

and here is the code on the view, I wrote the necessary code for better clarification of the problem

export default {

  name: 'Drivers',

  data: () => ({

    data: [],

    allDrivers: [],

    driversErrors: []

  }),

  created() {

    this.$store

      .dispatch('allDrivers')

      .then(() => {

        this.data = this.$store.getters.getAllDrivers

      })

      .catch(() => {

        this.errors = this.$store.getters.driverError

      })

  },

  computed: {

    isLoading() {

      return this.$store.getters.driversAreLoading

    }

  },

  methods: {

    verify: function(row) {

      console.log(row)

      this.$store.dispatch('toggleDriverApproval', row.id).then(() => {

        this.data = this.$store.getters.getAllDrivers

        console.log('done dis')

      })

    },

  },

}

JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by (1.7m points)
if I understand your issue, you want the UI displaying your data to change to the updated data after making a post request.

If you are using Vuex you will want to commit a mutation, and use a getter display the data.

I am not sure how your post request is being handled on the server but if successful typically you would send a response back to your front end with the updated data, and commit a mutation with the updated data.

Example:

Make a Post request

toggleDriverApproval (context, payload){

  return new Promise((res, rej)=>{

   http.post("/api/admin/toggleDriverApproval",{

       driver_id: payload

   })

   .then( response => {

   context.commit('driverApprovalCompleted', response.data);

   res();

   }).catch( error =>{

      context.commit('driverApprovalError', error.response.data);

      rej()

     })

   })

 }

If succesful commit the mutation

.then( response => {

 context.commit('driverApprovalCompleted', response.data);

 res();

})

response.data being your data you want to mutate the state with.

Mutation Example:

customMutation(state, data) {

    state.driverApproval = data

}

Getter Example:

driver(state) {

   return state.driverApproval

}

displaying the getter in a template

 <template>

  <div v-if="driver">{{driver}}</div>

</template>

<script>

import {mapGetters} from 'vuex'

export default {

  name: Example,

  computed: {

    driver() {

      return this.$store.getters.driver

    },

    // or use mapGetters

    ...mapGetters(['driver'])

  }

}

</script>

more examples can be found at Vuex Docs
...