使用 Vuex 和 axios 发送请求时 Vue-cli 项目数据更新延迟

Question

我正在使用 Vue-CLI 开发一个项目，这里是我的部分代码；

//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 是 member_management.vue 的一个组成部分，我想做的是什么时候ToggleAcc() 被触发，它发出 refresh() 并请求更新的数据。

问题是，在整个过程之后，数据更新了（我检查了数据库）但是 refresh() 函数 returns 没有更新的数据，我需要刷新页面可能需要几次以获取更新的数据（每次在 member_management.vue 中创建时都会运行 refresh()）

理论上，ToggleAcc 函数更新数据，refresh() 函数获取更新后的数据，我测试了几次以确保函数的执行顺序正确。

然而，情况永远不会改变。感谢您的帮助！

Answer 1

代码忽略了 promise 控制流。所有应该等待的承诺都应该被链接起来。在函数内部使用时，应返回 promises 以进行进一步链接。

是：

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

和

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

使用 Vuex 和 axios 发送请求时 Vue-cli 项目数据更新延迟

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

javascript

ajax

vue.js

axios

vue-cli