在 Vue.js 应用程序中，我们可以通过 Vuex 实现数据状态的集中管理。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它包括 Vuex.Store 实例以及一些辅助函数，用于创建更大型的 Vue.js 应用程序。在本文中，我们将深入探讨 Vuex 的状态管理机制中非常关键的一个点：Action。
什么是 Action？
在 Vuex 中，Action 是指用于提交 mutation 的函数，而不是直接变更状态，类似于在 Vue 组件中的 methods。不过 Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作，例如通过 REST API 从服务器获取数据、发送 WebSocket 消息等等，因此它们经常被用于处理异步操作。
我们可以在 Action 中执行异步操作，然后通过 Commit 提交一个 mutation 来变更状态。
Action 的结构
在 Vuex 中，Action 通过 store.dispatch 方法触发。
当 Action 被触发时，它接收一个与 store 实例具有相同属性和方法的 context 对象。因此，我们可以使用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
Action 通常是一个异步过程，例如发送 HTTP 请求并在收到响应后提交 mutation。不过 Action 也可以是同步的。如果 Action 返回一个 Promise，则 Vuex 将等待 Promise 完成，然后进行下一步操作。
例如，我们可以创建一个 Action 来异步从服务器获取用户数据：
const actions = { async getUserData(context) { const userData = await fetch('/api/userdata'); context.commit('setUserData', userData); } }
在上面的代码中，我们使用了 JavaScript 的 async/await 语法来实现异步操作。我们先使用 fetch() 函数从服务器获取数据，然后在收到响应后提交一个 mutation 来变更状态。
指导意义
Action 允许我们在 Vuex 中处理异步操作，并通过提交 mutation 来变更状态。通过使用 Action，我们可以更好的处理数据状态管理，并且在 Vuex 中提供更为复杂的数据操作功能。
使用 Vuex 来管理状态将大大简化 Vue.js 应用程序中的代码，并且可以更好地解决应用程序中的问题。与在 Vue 组件中硬编码状态管理相比，使用 Vuex 可以使代码更具可重用性，并提供更好的可维护性。
当您在编写 Vue.js 应用程序时，如果遇到了复杂的状态管理问题，您应该考虑使用 Vuex 来解决这些问题。
示例代码
在下面的示例中，我们将创建一个 Action 来异步获取用户数据，并通过提交 mutation 来变更状态。
-- -------------------- ---- ------- ----- ----- - --- ------------ ------ - --------- -- -- ---------- - ------------------ --------- - -------------- - --------- - -- -------- - ----- -------------------- - ----- -------- - ----- ----------------------- ----------------------------- ---------- - - --展开代码
在上面的代码中，我们创建了一个名为 getUserData 的 Action，该 Action 从服务器获取用户数据，然后提交一个名为 setUserData 的 mutation，来改变 state 中的 userData 属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b8296b306f20b3a65b4e20
