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

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

现在有两种写法：

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

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

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

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

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

个人觉得，这属于编程风格问题，项目组统一就好。

另外，也要看项目实际情况，比如一个用户的照片列表，并实现滚动瀑布流懒加载，响应用户滚动事件获取更多照片并显示出来，组件的交互及对界面的反馈都在组件内部进行的，那么就没有必要移到 vuex 里。

官方的建议是异步都放在actions中

简单小活动的话，所有调用都可以放在methods里面

但如果是主业务的话，就放在actions中，不然的话随着业务的扩展，你可以想象你的组件代码变得越来越长