Vue.js 2：无需设置状态，如何判断组件派发的action是否完成？

当然有办法啦！核心思路是利用Vuex的dispatch方法会返回对应action的返回值这一特性，而axios请求本身就是一个Promise——只要让你的createAddress action返回这个Promise，组件里就能直接监听请求的完成状态，完全不用额外在store里加状态。

第一步：确保createAddress action返回请求Promise #

调整你store中的action，让它返回axios请求的结果（不管用async/await还是直接返回Promise链都可以）：

// 示例1：用async/await写法
async createAddress({ commit }, address) {
  try {
    // 发起请求并返回响应结果
    return await axios.post('/your-address-api', address);
  } catch (error) {
    // 统一处理错误后抛给组件
    console.error('地址保存请求出错:', error);
    throw error; // 必须抛出错误，组件才能在catch里捕获到失败状态
  }
}

// 示例2：用Promise链式写法（不用async/await）
createAddress({ commit }, address) {
  return axios.post('/your-address-api', address)
    .then(response => {
      // 可选：如果需要处理响应数据，可在此操作后返回
      return response;
    })
    .catch(error => {
      console.error('地址保存请求出错:', error);
      throw error;
    });
}

第二步：在组件中监听dispatch的完成状态 #

修改组件里的saveAddress方法，用async/await或者.then()来等待请求完成，成功后直接关闭模态框：

方法一：用async/await（更直观易读）

async saveAddress() {
  try {
    // 等待dispatch完成（即请求成功返回）
    await this.$store.dispatch('createAddress', this.address);
    // 请求成功（状态200），关闭模态框
    this.isModalOpen = false; // 替换成你项目中控制模态框显示的变量名
  } catch (error) {
    // 请求失败时的处理，比如给用户提示
    alert('保存地址失败，请稍后重试');
    // 或者用项目里的全局提示组件，比如 this.$message.error('保存失败')
  }
}

方法二：用Promise链式调用

saveAddress() {
  this.$store.dispatch('createAddress', this.address)
    .then(() => {
      // 请求成功，关闭模态框
      this.isModalOpen = false;
    })
    .catch(error => {
      // 处理错误
      alert('保存地址失败，请稍后重试');
    });
}

原理很简单：Vuex的dispatch会把action的返回值原封不动返回给调用者，而axios请求本身就是一个Promise，所以我们可以直接利用Promise的特性判断请求是否成功完成，全程不需要在store里新增任何状态来跟踪请求进度，非常简洁高效。

内容的提问来源于stack exchange，提问作者Vishwas