前言
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态的一致性，方便简洁地管理组件之间的通信。在 Vuex 中，我们会常常听到「State」、「Mutation」、「Action」和「Module」这些概念，其中 Module 则是本文所要讨论的主题。
Module 是什么
Module，中文翻译为“模块”，是 Vuex 中的一个重要且强大的概念。它用于管理 Store 中的子模块，并提供了更为优雅的状态管理方案。
在我们使用 Vuex 进行状态管理的过程中，为了保证代码的可维护性和可拓展性，我们往往需要将 Store 拆分成多个子模块。这时候我们就可以使用 Module 这个概念来组织我们的状态管理。
Module 的组成
一个 Module 可以包含：state、mutations、getters 和 actions。而这些组成部分，在该模块下是完全独立的，不会与其他模块产生任何冲突。
state
state 主要用于存储数据，即所有数据的源头。我们可以通过在 store 对象中定义 state 模块，来生成一个 state。
-- -------------------- ---- -------
----- ----- - --- ------------
-------- -
----- -
------ -
------------ -----
-------- -----
-
-
-
--可以看到，我们在 Modules 中定义了 user 模块，并在该模块下定义了 currentUser 和 isLogin 两个变量。
mutations
mutations 可以看做是一个用于修改 state 的函数方法，用来进行同步的状态更改。
-- -------------------- ---- -------
----- ----- - --- ------------
-------- -
----- -
------ -
------------ -----
-------- -----
--
---------- -
----------------------- ----- -
----------------- - ----
------------- - ----
-
-
-
-
--在 user 模块中，我们定义了 SET_CURRENT_USER 方法，这个方法会通过参数 user 来更新 state 中的 currentUser 和 isLogin，这样我们就可以在其他组件中通过 $store.state.user.currentUser 来访问当前用户的信息。
getters
getters 可以被看作是 Store 的计算属性，用于根据存储到 state 中的数据，生成新的数据。
-- -------------------- ---- -------
----- ----- - --- ------------
-------- -
----- -
------ -
------------ -----
-------- -----
--
---------- -
----------------------- ----- -
----------------- - ----
------------- - ----
-
--
-------- -
------------ ------- -- -
------ ------------------------------- ------------------------------
-
-
-
-
--在这个示例中，我们定义了一个 getFullName 方法，它根据 currentUser 中的 firstName 和 lastName 来合并成 fullName，并返回。
actions
来自 Vue 官网的解释：Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
简单来说，我们可以把 actions 当做是对 mutations 的再次封装，使我们的代码更容易维护和升级。
-- -------------------- ---- -------
----- ----- - --- ------------
-------- -
----- -
------ -
------------ -----
-------- -----
--
---------- -
----------------------- ----- -
----------------- - ----
------------- - ----
-
--
-------- -
------------ ------- -- -
------ ------------------------------- ------------------------------
-
--
-------- -
-------------------------- -
------ ------------------------------------ -- -
-------------------------- --------------
--
-
-
-
-
--在这个 示例中，我们增加了 fetchCurrentUser 方法。它通过在 axios 中发起一个异步请求来获取当前用户信息。如果请求成功，就会通过 mutations 中的 SET_CURRENT_USER 方法来更新 state。而这些同步的数据操作，使得我们的组件更加健壮和简单。
总结
通过 Module 我们可以方便的将大的 Store 拆分成多个子模块，大大提高了代码的可维护性和可读性。在使用 Module 的过程中，我们需要注意不同模块之间的命名空间问题，避免数据产生冲突。同时，我们也可以在一个模块上增加其它模块的引用来实现模块复用，从而进一步提高代码的可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ee2fb968c7c53b010f7a9