Vuex4.x（四）action的各种使用方式

Posted 2023-03-14

参考技术A 由于mutation不支持异步操作，所以vuex又提供了action，这个可以支持异步，在有些情况下就会非常方便。

异步操作分为两种情况，一个是内部的异步操作，一个是外部的异步操作。

比如访问后端API获取数据的时候，又或者把数据存入前端存储的时候。

我们先写个简单的例子

看看参数

我们new 一个 Promise就可以了，里面可以用axios等各种操作。
最后记得返回new出来的实例。

如果不需要知道确定的完成时间的话，可以直接调用

如果要知道的话，可以写个then

这个用法和axios非常相似。

看看运行效果

我们可以自己new 一个promise把axios包含进去，也可以直接返回axios的实例，比如这样

调用方式

这样内部和外部都可以得到axios返回的数据。

如何选择就看对返回数据的封装程度了。

https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/

https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex