如何将Vuex Store Action从Promise转换为async/await并在组件中使用

没问题！把你这段Promise风格的Vuex Action改成async/await其实非常直观，既保留原有逻辑，代码可读性还更高。我直接给你转换后的代码，再说说组件里怎么用：

转换后的Vuex Action #

async fetchActiveWorkspace (context, workspaceID) { 
  if (workspaceID) { 
    try {
      // 用await替代.then，直接拿到响应结果
      const response = await this.$axios.get(`@api-v01/workspaces/workspace/${workspaceID}`)
      // 执行commit，和原来逻辑一致
      context.commit('setActiveWorkspace', response.data)
    } catch (err) {
      // 捕获错误后抛出，和原来的catch逻辑保持一致
      throw err
    }
  } else { 
    // async函数里返回普通值会自动包装成resolved的Promise，等价于原来的Promise.resolve(true)
    return true
  } 
}

组件里的使用方式 #

因为async函数本身就会返回Promise，所以原来组件里的调用方式完全兼容，同时你也可以用async/await来写组件里的逻辑，风格更统一：

方式1：用async/await（推荐，风格统一） #

// 组件方法里
async loadWorkspace() {
  try {
    await this.$store.dispatch('fetchActiveWorkspace', '你的工作区ID')
    // 成功后的逻辑，比如提示加载完成
  } catch (error) {
    // 处理错误，比如提示加载失败
    console.error('加载工作区失败:', error)
  }
}

方式2：保留原来的.then/.catch（兼容旧代码） #

// 组件方法里
loadWorkspace() {
  this.$store.dispatch('fetchActiveWorkspace', '你的工作区ID')
    .then(() => {
      // 成功逻辑
    })
    .catch(error => {
      // 错误处理
    })
}

核心思路就是：async函数自动封装返回值为Promise，await替代.then的链式调用，try/catch替代.catch的错误捕获，完全匹配你原来的业务逻辑，没有任何功能变化，只是代码更清爽了～

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