vuex 异步ajax,Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中？

假如说我页面上有一个按钮，点击之后请求后端接口，然后将后端返回的 json 做相关处理之后写入 vuex 的 state。

现在有两种写法：

一种是：“请求后端接口” 这个 ajax 代码应该是写在按钮的点击事件处理函数中，然后在这个处理函数里面提交 mutations

还一种是：直接将 “请求后端接口” 这个 ajax 代码写在 actions 中，actions 中提交 mutations，按钮的点击事件处理函数中只写一个分发 actions 的按钮

请问哪种写法更加合适而且优雅？

另外还有一个疑问就是 “将后端返回的 json 做相关处理” 这个代码又应该是先处理好，然后将处理好的数据传入 mutations，还是直接在 mutations 里面处理？

我个人觉得后者代码量更大，感觉有点麻烦，但是不知道会不会在解耦合，追踪数据变化方面更好？

我会把所有和服务端的交互写在 Actions 中(除非你和服务端的交互不需要界面反馈，比如前端打点的统计这种)其他情况下理论上你的页面的状态应该是和服务端一一对应的。所以把对后端的请求都通过 Actions 来封装，你业务代码里逻辑就只有对 Action 的调用操作，更形象的就是直接对数据操作。而再不用管数据的返回之类的，因为数据返回直接会改变 state，而 state 的改变直接会触发 View 的更新。我觉得这个才是 vuex 和 前端单向数据流方便，提高效率的地方。总体的设计原则是 Actions 是异步，处理业务逻辑的，而 Mutation 只是简单对 state 的状态进行改变。通过这样你所有的组件进行的操作都可以和你的 state 的状态一一对应，代码清晰简单。

我肯定会处理好再传入 mutations，我的 mutation-types 都非常的清晰就是 UPDATE_[XXX] ，ADD_[XXX] 所以除去必要的逻辑，如果有计算逻辑，或是其他格式化的逻辑，我肯定是做完以后，才调用 commit 你可以把 state 理解为前端的共用数据库， mutations 这些是增删改，getters 是查，所以 mutations 里的逻辑应该是越少越好，记得官网也有建议