Vue-cli project data update delays when sending request with Vuex and axios-CodePudding

I'm working on a project with Vue-CLI, and here's some parts of my code;

//vuex
const member = {
    namespaced:true,
    state:{
        data:[]
    },
    actions:{
        getAll:function(context,apiPath){
            axios.post(`http://localhost:8080/api/yoshi/backend/${apiPath}`, {
                action: "fetchall",
                page: "member",
            })
            .then(function(response){
                context.commit('displayAPI', response.data);
            });
        },
        toggle:(context,args) => {
        return axios
            .post(`http://localhost:8080/api/yoshi/backend/${args.address}`,
            {
                action:"toggle",
                ToDo:args.act,
                MemberID:args.id
            })
            .then(()=>{
                alert('success');
            })
    },
    },
    mutations:{
        displayAPI(state, data){
            state.tableData = data;
        },
    },
    getters:{
        getTableData(state){
            return state.tableData
        }
    }
}

//refresh function in member_management.vue

  methods: {
    refresh:function(){
      this.$store.dispatch('member/getAll',this.displayAPI);
      this.AllDatas = this.$store.getters['member/getTableData'];
    }
  }

//toggle function in acc_toggler.vue

    ToggleAcc: function (togg) {
      let sure = confirm(` ${todo} ${this.MemberName}'s account ?`);
      if (sure) {
        this.$store
          .dispatch("member/toggle", {
            address: this.displayAPI,
            id: this.MemberID,
            act: togg,
            Member: this.MemberName,
          })
          .then(() => {
            this.$emit("refresh");
          });
      }
    },

The acc_toggler.vue is a component of member_management.vue, what I'm trying to do is when ToggleAcc() is triggered, it emits refresh() and it requests the updated data.

The problem is , after the whole process, the data is updated (I checked the database) but the refresh() funciton returns the data that hadn't be updated, I need to refresh the page maybe a couple of times to get the updated data(refresh() runs everytime when created in member_management.vue)

Theoretically, the ToggleAcc function updates the data, the refresh() function gets the updated data, and I tested a couple of times to make sure the order of executions of the functions are right.

However, the situation never changes. Any help is appreciated!

CodePudding user response：

The code ignores promise control flow. All promises that are supposed to be awited, should be chained. When used inside functions, promises should be returned for further chaining.

It is:

refresh:function(){
  return this.$store.dispatch('member/getAll',this.displayAPI)
  .then(() => {
    this.AllDatas = this.$store.getters['member/getTableData'];
  });
}

and

getAll:function(context,apiPath){
    return axios.post(...)
    ...