Estoy trabajando en un proyecto con Vue-CLI y aquí hay algunas partes de mi código;

 //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"); }); } },

acc_toggler.vue es un componente de member_management.vue , lo que intento hacer es cuando se activa ToggleAcc(), emite refresh() y solicita los datos actualizados.

El problema es que, después de todo el proceso, los datos se actualizan (revisé la base de datos) pero la función de actualización () devuelve los datos que no se habían actualizado, necesito actualizar la página tal vez un par de veces para obtener la actualización data(refresh() se ejecuta cada vez que se crea en member_management.vue)

Teóricamente, la función ToggleAcc actualiza los datos, la función refresh() obtiene los datos actualizados y probé un par de veces para asegurarme de que el orden de ejecución de las funciones sea correcto.

Sin embargo, la situación nunca cambia. ¡Cualquier ayuda es apreciada!