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

Question

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

---

现在有两种写法：

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

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

---

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

---

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

---

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

Answer 1

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

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

Answer 2

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

Answer 3

如果您使用vuex的话，建议您存入vuex中，因为actions可以执行异步操作。同上，简单的页面放在methods里面即可。比较复杂，或者重要建议放在vuex中，容易维护，代码清晰,并且调用简单，这个在项目后期很重要。

Answer 4

针对一楼说的, 官方应该是需要提交到 mutations 的异步需要放在 action 中才对吧... 所谓 action 中也只是为了时间旅行记录用, 其实也就是为了记录状态变更, 如果你的异步请求不是为了提交 mutations, 放哪里, 如何写, 应该都没什么区别. 都只是一个方法.
重复一遍@kingMario 说的放哪无所谓, 只是为了统一管理, 目前我们的做法其实也是都放在了 action 中, 看其他项目的同事写的, 也很多都在 methods 里写, 还是一句, 写哪无所谓, 看是否统一管理这些异步请求.且是否写入 vuex

Answer 5

我是这样认为的，首先，你要考虑清楚这个异步请求你要是 全局公用呢还是 单个组件私有呢？
如果是公用，还是写在 vuex 的actions 当中为妙，而私有 则 写在methods中。

实际上我是这样做的，公有数据 state ,而私有方法。
意思就是直接 不用 actions， 请求全部放在 组件methods 当中，更新数据的话也不通过 actions 这一环节，直接通过method 调用 mutation。 这样就可以把vuex 分为三个部分， state,setter,getter, 风别是 数据，写操作，读操作。 这样的话 我觉得逻辑清楚一点。

而如果把 method 写到 actions 中，第一个，在写组件的时候不是太方便，使得 vue组件严重依赖 store。再一个，写着太麻烦，例如，我就随便改一个数据的值，而我又不想使用mapActions 将所有方法写到store中，那我就得先调用 …mapAction,然后通过action 将数据提交到 mutation，再通过 mutation 来改state，流程是在是太长了。而省略掉 action后，只需要在方法中 …mapMutation 就直接改好 state,方便快捷。

而且到目前为止，我还没有发现那个方法需要写进 actions 呢，全局只要 数据 流通就够了。

Answer 6

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

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

Answer 7

如果使用了vuex的话，还是建议放在action里请求数据，然后处理完数据commit给mutation里保存在state中。易于后期维护。