在Vuex的action中返回值是否违背了Vuex Store的设计初衷？

写法合理性判定 #

这种写法完全可行，属于Vuex官方支持的合法用法，和「通过getter获取响应式全局状态」的核心能力并不冲突，是互补的使用方式。

现有代码小瑕疵提示 #

当前代码存在两处不影响用法逻辑合理性的可优化点：

1. 同时混用async/await和.then链式调用，代码风格不统一，建议统一用async/await语法简化逻辑
2. 代码中axios请求返回值为res，但实际过滤数据时用了未定义的coinData变量，属于笔误，修正后正常可用，修正后的参考代码如下：

async getYoutubeReport({ commit }, payload) {
  const res = await this.$axios.get(`youtube/reports/${payload.date}/${payload.coin}`)
  const today = utils.yearMonthDay(new Date())
  const report = res.data.Items.find(Report => utils.yearMonthDay(new Date(Report.createdAt)) === today)
  commit('SET_YOUTUBE_REPORT', report)
  return report
}

适用场景 #

这种写法在以下场景下有明显的优势：

• 调用后需要立即做一次性逻辑处理：比如调用接口后需要立即根据返回结果判断是否弹出提示、是否跳转页面，这类一次性逻辑不需要额外定义getter监听状态变化，直接拿返回值处理更简洁
• 多个异步请求存在串行依赖：比如需要先拿到YouTube报告的id，再用这个id请求其他关联数据，直接const report = await getYoutubeReport()拿到结果再传参给下一个请求，逻辑链路更清晰，不需要通过监听state变化触发后续逻辑
• 临时调用不需要长期响应数据变化：比如仅在用户点击特定按钮时拉取一次数据，用完即弃，也没有其他组件需要共享该次请求的结果，直接用返回值即可，不需要额外占用全局状态空间
• 需要在调用侧处理异步操作的成功/失败状态：可以直接在调用处捕获异常、判断返回结果，不需要把接口请求的成功失败状态也存入全局state，减少不必要的全局状态维护成本

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