npm 包 vuex-multi-commit 使用教程
前言
在使用 Vue.js 进行项目开发过程中，我们常常会使用到 Vuex 进行状态的统一管理，如果涉及到多个状态的更新，我们就需要多次提交 mutaion。
针对这个问题，npm 包 vuex-multi-commit 提供了一种便捷的方式，可以同时提交多个 mutaion，帮助我们更加高效地管理状态。
安装
在项目中安装 npm 包 vuex-multi-commit：
--- ------- ----------------- ------
使用
使用 vuex-multi-commit 包之前，我们需要先定义一些基本的 concept：
- Operator：操作者，对于状态的修改仅仅对应一个 Operator。它是一个命名的空间（Namespace)，用于关联不同的 commit。
- Commit：其中一个 Operator 的某个动作（Action）。每个 Commit 包括两个属性：mutationType 和 commitFun。
在安装和配置完 vuex-multi-commit 之后，我们就可以通过 createMultiModule 方法来创建一个 Vuex 模块，模块内包含多个 Operator。以实现多个状态的管理。
在组件内，我们可以引用新建的 Vuex module，然后通过这些 Operator 来调用多个 Commit。接下来我们还是通过一个简单的示例来演示如何使用该 npm 包。
示例代码：
main.js：
------ --- ---- -----
------ ---- ---- ------
------ - ----------------- - ---- -------------------
------ --- ---- -----------
-------------
----- ----------- - -------------------
------------ -
---------- -
------------- ---------------
---------- -- ------ -- -------- -- -
---------------------- --------
-
--
---------- -
------------- ---------------
---------- -- ------ -- -------- -- -
---------------------- --------
-
-
--
------------ -
---------- -
------------- ---------------
---------- -- ------ -- -------- -- -
---------------------- --------
-
--
---------- -
------------- ---------------
---------- -- ------ -- -------- -- -
---------------------- --------
-
-
-
--
----- ----- - --- ------------
-------- -
------ -----------
-
--
--- -----
------
--- -------
------- - -- ------
--App.vue：
----------
-----
------------- ---- -- ----------------- --------
------- ----------------------------------------
------- ----------------------------------------
------------- ---- -- ----------------- --------
------- ----------------------------------------
------- ----------------------------------------
------
-----------
--------
------ - ------------ - ---- ------
------ ------- -
--------- -
----------------- -- -
------ ------------------------------------------
--
----------------- -- -
------ ------------------------------------------
-
--
-------- -
-----------------
------------- ------------------------------
------------- ------------------------------
------------- ------------------------------
------------- -----------------------------
--
-
-
---------在这个示例中，我们创建了两个 Operator（operatorOne 和 operatorTwo），每个 Operator 中又各包含了两个 Commit（increment 和 decrement）。
我们通过调用 mapMutations 函数来把指定 Operator 中的 Commit 映射到组件中。然后我们就可以使用这些 Commit 来同时更改组件的 state 了。
使用 vuex-multi-commit 可以让我们更加方便快捷地同时更改多个 state，尤其适用于多人协作开发大型项目。希望这篇文章能够帮助大家更有效地使用 Vuex 进行状态管理。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066b4d51ab1864dac66822