本文探讨了在Vue项目中当前异步请求存在的问题，包括代码冗余、业务逻辑依赖watch以及错误的mutation使用。提出使用Promise来优化请求流程，实现页面调用axios后立即处理业务逻辑，并在数据返回后及时响应界面。文中以删除功能为例，展示了如何在actions中使用Promise，简化页面method的调用函数，解决异步问题。
一、当前存在的问题
目前项目前端请求后台数据的方式是这样的：
页面中method中dispatch到action
action调用mutation，请求axios
请求到数据后存储到state中
页面中在computed中获取state，使用watch监听到数据变化之后做业务逻辑。
调用流程如图:
在当前的项目中，这样的调用方式可以解决异步请求，对于接口的响应速度也很快。但依然有着几点不足。
1.代码冗余
页面中的每一个请求都需要一个method，一个comuputed和一个watch。我们知道computed是计算属性，是Vue数据驱动的重要实现。但在计算属性里获取state这个操作并没有去"计算"。实际上是用了mapstate获取了全局的state，计算属性在这里成了一个state的容器。
2.业务逻辑依赖watch
我们知道watch是监听器，但是用监听器去监听计算属性(数据驱动的)的变化，是本末倒置了。可以看看Vue官方文档是如何描述监听的:
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
watch应该是作为computed的补充，而不是代替。所以当前的问题是大量的业务逻辑写在watch里，而不是在调用接口，数据返回之后立即处理
3.错误的mutation使用
为什么是错误的呢？我们先看看为什么会有上面两个错误的出
最低0.47元/天 解锁文章
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
