Vuex 是 Vue.js 的官方状态管理工具，它可以帮助我们更好地管理 Vue.js 应用的状态。但是，在使用 Vuex 时，一些常见的问题常常困扰着前端工程师，如何优雅地使用 Vuex 来避免这些问题呢？本文将从状态管理器的基本原则和 Vuex 的结构入手，详细讲解如何优雅地使用 Vuex。
基本原则
在使用任何状态管理器之前，必须了解以下基本原则：
禁止在组件中直接修改状态
在 Vue.js 中，我们使用组件来构建应用，并在组件中管理状态。但是，在组件中直接修改状态是不被允许的。这种做法会导致代码难以维护，因为你不知道哪些组件会修改状态，以及修改是何时发生的。
所有状态改变只能通过提交 mutation 来实现
在 Vuex 中，只有通过提交 mutation 才能改变状态。mutation 是一个变更状态的函数，并且必须是同步的。这可以确保所有状态的变更都是可追踪的。我们可以看到 mutation 的完整流程，对状态的任何更改都需要通过提交 mutation 之后才会真正发生。
组件不关注 state，而是通过 getter 属性和 action 来获取状态和执行操作
组件需要获取 state 以及执行操作的时候，使用 getter 和 action，而不是直接访问 state 或者提交 mutation。getter 是一个函数，可以用来派生状态；action 是异步操作，可以用来执行一些副作用操作，如发送网络请求、获取后端数据等。
Vuex 的结构
在实现 Vuex 的时候，我们需要考虑以下几个基本组成部分：
- State：存储应用的状态
- Mutation：变更 State 的唯一途径
- Action：用于异步操作、副作用操作、组合各种 mutation
- Getter：用来派生 State，取代直接访问 State
根据以上原则和组成部分，我们可以写出一个简单的 Vuex Store，如下所示：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
------ ------- --- ------------
------ -
------ -
--
---------- -
---------------- -
-------------
-
--
-------- -
---------------- ------ -- -
------------- -- -
-------------------
-- -----
-
--
-------- -
------ ----- -- -----------
-
--优雅地使用 Vuex
在实践过程中，如何优雅地使用 Vuex 呢？以下是一些经验和指导：
将 Vuex 集中统一管理
使用 Vuex 的时候，建议将 Vuex 集中管理，避免在项目的各个角落都使用 Vuex。我们可以在单独的文件中建立一个 store.js 文件，用于定义和初始化应用程序的 store 模块。
使用 mapState 辅助函数
在组件中使用 Vuex 时，getter 总是被忽略，而且代码复杂度容易上升。为了避免这种情况，Vue.js 提供了 mapState 辅助函数。这可以将 getter 映射到组件的计算属性中，从而避免显式引用。
使用 Mutations 处理同步逻辑
Mutations 只能处理同步逻辑，在一个变更状态的函数中，只包含同步操作，是对 State 的改变的操作。Action 通常用于处理异步逻辑。
异步处理使用 Actions
Action 用于处理复杂的副作用，例如异步请求。将 Action 派生出来，将代码拆分成小块，始终保持你的 Mutations 和 Actions 是干净的且分离的。
Getter，派生状态
Getter 是一个函数，可以通过派生状态来获取映射到组件中。例如，我们可以安排它们连接到计算属性，然后在模板中调用。
批量赋值和对象展开
在 Vuex 的迭代中，我们经常会用到批量赋值和对象展开，例如：
-- -------------------- ---- ------- ------------- ------- -- ----------------- ------------ ----------- -- --------------- ----------------- ----------------------- --------------------- --
以上是使用 Vuex 的一些核心经验和感悟，希望能够帮助大家更好地理解 Vuex，提高 Vuex 的使用效率。
示例代码
以下是一个基本的 Vuex 的实现示例。
/store/index.js
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ ---- ---- ----------------
------ ---------- ---- ----------------------
-------------
----- ----- - --- ------------
-------- -
-----
----------
-
--
------ ------- -----/store/modules/user.js
-- -------------------- ---- -------
----- ----- - -
----- ----------
-
----- --------- - -
-------------- ----- -
---------- - ----
-
-
----- ------- - --
----- ------- - -
----- ----- -- ----------
-
------ ------- -
----------- -----
------
----------
--------
-------
-/store/modules/permission.js
-- -------------------- ---- -------
----- ----- - -
-------- --
-
----- --------- - -
----------------- -------- -
------------- - -------
-
-
----- ------- - -
---------------- ------ -- ----- -
-- ----
-------------------- -----
-
-
----- ------- - -
-------- ----- -- -------------
-
------ ------- -
----------- -----
------
----------
--------
-------
-/components/User.vue
-- -------------------- ---- -------
--------
------ - --------- ------------- ---------- - ---- ------
------ ------- -
----- -------
--------- -
------------------- -
-------
--
--
-------- -
----------------------- -
----------
---
--------------------------- -
----------------
---
-
--
---------
----------
--------- ----------
--------- ----- -- ---- --------
------- -------------------------------- ---- -- -----------------
------- -------------------------------- ---------------
-----------结论
在本文中，我们详细讨论了如何优雅地使用 Vuex。通过了解基本原则和 Vuex 的结构，以及一些最佳实践和经验，我们可以写出更容易维护，更加健壮的应用程序。希望这篇文章能够帮助你更好地理解 Vuex，并更好地运用于自己的 Vue.js 项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f65357c5c563ced582b70a