在 Vue.js 中使用 vuex 管理状态是一种很方便的方法，它能够在多个组件之间共享数据和状态，从而让我们的应用更加易于维护和开发。但是，随着应用的复杂性增加，我们会发现使用 vuex 会带来很多冗余和不必要的代码。本文将介绍如何解决这些问题。
vuex 的冗余问题
- Getter 和 Mutation 的写法重复
在 vuex 中，Getter 和 Mutation 的写法都很类似。需要定义一个函数，接收 state 作为参数，返回相应的值或修改 state，然后在组件中使用 $store.getters.xxx 或 $store.commit('xxx', payload) 来访问它们。但是，当我们定义大量的 Getter 和 Mutation 时，会发现他们的写法很类似，甚至有些重复。
-- -------------------- ---- ------- -- ------ ------------ ------- -- - ------ --------------- -- -- -------- --------------- ------- -------- -- - --------------- - ------- -
- Action 的使用过程中存在状态转移问题
Action 更加灵活，可以包含异步操作和多个 Mutation。但是，在复杂的应用中，我们会发现一个 Action 中会包含多个 Mutation，且这些 Mutation 可能会被其他 Action 重复利用，从而导致状态的转移问题，同时可能使逻辑变得复杂。
-- -------------------- ---- -------
-- ------
--------------- -- ------ -- -------- -- -
------ --- ----------------- ------- -- -
--- ------- - ------------
--- ------ - -----------
-- ----------------
-- - ------- - -
------------------------ --------
-
-- - ------ - -
----------------------- -------
-
---------
--
-解决方案
- 使用 Vuex Helper
Vuex Helper 是一个帮助我们减少 Getter 和 Mutation 写法重复的工具库。它能够自动生成 Getter 和 Mutation 的代码，从而让我们集中精力编写真正需要的代码。
npm install vuex-helper
-- -------------------- ---- -------
-- - ----- --- -----------
------ - ------------ - ---- -------------
------ ------- --- ------------
------
---------- --------------
----- -
-------------
-----------
-
--
--
-- ------
--------- -
---------------
--------- -----------
--
--
-------- -
-----------------
----------- ------------------
---------- ----------------
--
-- 将 Action 拆分成更小的逻辑单元
将 Action 拆分成更小的逻辑单元会让逻辑更加清晰，易于维护和开发。我们可以将复杂的 Action 拆分成多个小的逻辑单元，每个逻辑单元控制一部分状态的更新，然后再将这些逻辑单元组合成具有更复杂逻辑的 Action。
-- -------------------- ---- -------
-- - -------------- - ------------- ------- --------
---------- -
--------------- ------- -------- -- -
--------------- - -------
--
-------------- ------- ------- -- -
-------------- - ------
-
-
-- -- -------------- ------
-------- -
--------------- -- ------ -- -------- -- -
------------------------ --------
--
-------------- -- ------ -- ------- -- -
----------------------- -------
--
--------------- -- -------- -- -------- -- -
------ --- ----------------- ------- -- -
--- ------- - ------------
--- ------ - -----------
-- ----------------
-- --------- -
-------------------------- --------
-
-- -------- -
------------------------- -------
-
---------
--
-
-结论
我们介绍了在实际应用中使用 vuex 时可能会遇到的冗余问题，并提供了解决方案。Vue.js 提供了很多有用的工具和库可以帮助我们更加轻松地管理状态和逻辑，我们应该关注和使用它们，从而让我们的应用更加易于维护和开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6736ffcd317fbffedf075466