在 Vue.js 的项目中，我们经常需要使用 Vuex 这个状态管理插件来管理应用程序的状态。随着应用程序的复杂度增加，我们可能需要完成一些异步操作来获取数据，这时候就需要使用 Vuex-async-actions 这个 npm 包了。
本文将为大家介绍如何使用 Vuex-async-actions 来处理 Vue.js 中的异步 action。
什么是 Vuex-async-actions
Vuex-async-actions 是一个 Vuex 插件，可以简化异步 action 的编写和管理。
它对 Vuex 的 action 进行了封装，使得我们可以更加方便地使用 Promise 来管理异步 action，避免了 Vuex 内部的异步关键字 done or resolve 等繁琐的处理。
安装方法
我们可以通过以下命令来安装 vuex-async-actions：
npm install vuex-async-actions --save
使用方法
引入 vuex-async-actions
在 Vuex.Store 中使用 vuex-async-actions 第一步是引入插件：
-- -------------------- ---- ------- ------ --- ---- ------ ------ ---- ---- ------- ------ ------------------ ---- --------------------- -------------- ----- ----- - --- ------------ -- --- -------- ------------------------- ---
创建异步 action
在使用 vuex-async-actions 创建异步 action 时，我们需要指定三个参数：
types：包含三种类型的属性，type、successType、errorType，其中 successType 和 errorType 用于覆盖默认状态成功和失败状态时的 mutation 名称和 payload（默认状态会将非 Promise 的payload 设置为成功数据状态中的数据，Promise.resolve(payload) 设置为成功状态下的数据，Promise.reject(payload) 设置为错误状态下的数据）。
payload：传入 state，commit，dispatch 等参数，返回 Promise 对象，表示异步操作。
options：选项包含 immediate 选项，在第一次获取时即调用该 action。
创建成功后，我们就可以像普通 action 一样在组件中使用它。比如，我们可以创建一个获取用户信息的 action：
-- -------------------- ---- -------
------ ----- ----------------- - -------------------
-
----- ------------------
------------ --------------------------
---------- -------------------------
--
------- ------- --------- -- -
------ --- ----------------- ------- -- -
-----
-----------------
----------- -- -
-------
-
----- ----------------
--------- ---------
--
- ----- ---- -
--
------------------
--
------------ -- -
------------
---
---
-
--此外，我们还可以为异步的 action 创建 mutation。这个 mutation 会在异步 action 创建成功或者失败的时候被触发。这可以让我们更方便地在 store 中保存状态。
可以在 Vuex.Store 中添加 mutations：
-- -------------------- ---- -------
-------------------------------
----- --------- - -
------------------------------- -
------------ - ----------
--
-------------------------------------- -------- -
------------ - ----------
-------------- - --------
--
------------------------------------ ------------- -
------------ - --------
-------------- - -------------
--
--使用 action
在组件中使用 action：
-- -------------------- ---- -------
-------- -
------------- -
-----------
------------------------------
----------- -- -
-----------------
--
------------ -- -
-----------------
---
--
--结束言
vuex-async-actions 可以让我们更加方便地管理 Vuex 中的异步 action，在 Vuex.Store 中引入后，我们就可以使用它来创建异步 action，我们还可以为异步 action 创建 mutation，让我们更方便地在 store 中保存状态。
我们在实际项目中需要结合具体的业务需求灵活应用，并且在后续的 Vue.js 项目中，也可以使用 vuex-async-actions 来更容易地管理异步操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a181e8991b448dfd06