Vuex 是一个用于管理 Vue 应用程序中状态的库。它采用集中式存储的状态管理模式，将应用程序中的所有状态集中存储在一个单独的容器中。但是随着应用的增长，Vuex 状态管理的代码逻辑会变得异常复杂，Vue.js 社区中产生了一些用于简化 Vuex 状态管理的辅助库，其中 @bartvanvliet/vuex-module-decorators 是其中一个。
本文将介绍如何使用 @bartvanvliet/vuex_module_decorators 辅助库，以更加简单和直观的方式编写和管理 Vuex 状态。
1. 安装 @bartvanvliet/vuex_module_decorators
首先，我们需要在项目中安装 @bartvanvliet/vuex_module_decorators：
--- ------- ------ ------------------------------------
2. 编写 Vuex 模块
使用 @bartvanvliet/vuex_module_decorators 编写 Vuex 模块非常直观和简单。只需要使用修饰器装饰一个普通的 class 即可：
------ - ------- ----------- -------- - ---- ------------------------
--------- ----- ---------- ------------- ----- ----------- ---- --
------ ------- ----- ------- ------- ---------- -
----- - -
---------
---------------- ------- -
---------- -- -----
-
-在这个例子中，我们使用了 @Module 修饰器来装饰一个 class，并将其注册到 Vuex。参数 name 是 Vuex 模块的名称，namespaced 可以控制该模块的命名空间，stateFactory 表示每次都返回一个新对象。
VuexModule 类包含 Vuex 模块的所有功能，我们可以在其上面定义 state、getters、mutations 和 actions，具体如下：
------ ------- ----- ------- ------- ---------- -
----- - -
-- ------
--- ------------- -
------ ---------- - -
-
-- --------
---------
---------------- ------- -
---------- -- -----
-
-- ------
-------
----- -------------- -
----- - ---- - - ----- ------------------------
--------------------
-
-3. 在 Vue 组件中使用 Vuex 模块
在 Vue 组件中，我们可以通过 mapState、mapGetters、mapMutations、mapActions 等 Vuex 的辅助函数来快速绑定 Vuex 状态和方法。使用 getters 或 state 时，我们需要给其命名空间加上模块名称：
------ - ---------- --- - ---- ------------------------
------ - ----------- ------------ - ---- ------
------------
--------- -
---------------
------------ ---------------------
--
--
-------- -
-----------------
---------- -------------------
--
-
--
------ ------- ----- ---------------- ------- --- -
---------------- -
-----------------
-
-结论
使用 @bartvanvliet/vuex_module_decorators 可以大大简化 Vuex 状态管理的代码逻辑，令代码更加直观和易懂。希望本文能对 Vue.js 开发者在 Vuex 状态管理上有所启发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067381890c4f72775841fe