什么是 Vuex
Vuex 是 Vue.js 官方提供的状态管理库，用于实现 Vue.js 应用程序的中心化状态管理。它建立在 Vue.js 的响应式系统之上，提供了一个单一的状态树，在其中存储应用程序的所有组件的状态。Vuex 还提供了诸如 getter、mutation、action 等功能，来更好地管理和修改状态。
为什么要使用 Vuex
在 Vue.js 应用程序中，通常会有许多组件需要共享状态。这些状态可能包括用户信息、购物车信息、全局配置等。这些状态需要在多个组件之间进行共享和同步，如果只使用 props 传递状态将会显得非常繁琐和复杂。
而 Vuex 就是为了解决这个问题而设计的。它可以帮助我们更好地组织和管理组件之间的状态，让我们的代码更易于维护和扩展。
如何使用 Vuex
安装 Vuex
你可以使用 npm 命令来安装 Vuex：
npm install vuex --save
创建 store
在使用 Vuex 之前，我们需要先创建一个 store，用来存储应用程序的所有状态。
-- -------------------- ---- -------
------ --- ---- ------
------ ---- ---- -------
--------------
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
--------------
-
-
---
------ ------- ------在上面的示例中，我们创建了一个包含一个状态 count 和一个 mutation increment 的 store。
在组件中使用 store
在组件中使用 store 非常简单，只需要通过 this.$store 访问 store 中的状态和方法即可。
-- -------------------- ---- -------
----------
-----
--------- -- ----- ------
------- -------------------------------------
------
-----------
--------
------ ------- -
--------- -
------- -
------ ------------------------
-
--
-------- -
----------- -
--------------------------------
-
-
-
---------在上面的示例中，我们通过 computed 属性来访问 store 中的状态 count，并通过 methods 属性来调用 mutation increment。
使用 getter
有时候我们需要在组件中使用经过处理的状态，这个时候就可以使用 getter 了。getter 可以看做是 store 中的计算属性，它接受 store 的 state 作为参数，并返回一个计算后的值。
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
- --- -- ----- ----- --- ----- ----- --
- --- -- ----- ----- --- ----- ---- --
- --- -- ----- ----- --- ----- ----- -
-
--
-------- -
---------- ----- -- -
------ ----------------------- -- -----------
--
--------- ------- -------- -- -- -- -
------ --------------------- -- ------- --- ----
-
-
---在上面的示例中，我们定义了两个 getter：doneTodos 和 todoById。doneTodos 会返回所有已经完成的 todo，而 todoById 则接受一个 id 参数，并返回与该 id 对应的 todo。
使用 action
mutation 可以让我们更改 state 中的状态，但是它不能处理异步操作。而 action 则可以处理异步操作，并提交 mutation 进行状态更改。
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
--------------
-
--
-------- -
----------------------- -
------------- -- -
----------------------------
-- ------
-
-
---在上面的示例中，我们定义了一个 action incrementAsync，它会在一秒钟后调用 mutation increment 进行状态更改。
你可以通过使用 this.$store.dispatch 来调用 action。
this.$store.dispatch('incrementAsync');使用 modules
当我们的应用程序越来越复杂时，将所有状态都放在同一个文件中会变得非常难以维护。这个时候就可以使用 modules 来将 store 分割成更小的模块了。
-- -------------------- ---- -------
----- ----- - --- ------------
-------- -
-------- -
------ ---
---------- ---
-------- ---
-------- --
--
-------- -
------ ---
---------- ---
-------- ---
-------- --
-
-
---在上面的示例中，我们创建了两个模块 moduleA 和 moduleB。
总结
在 Vue.js 中，使用 Vuex 进行状态管理是非常常见的选择。通过使用 Vuex，我们可以更好地组织和管理我们的组件状态，并提供了 getter、mutation、action 等功能，让我们的代码更易于维护和扩展。
在使用 Vuex 时，我们需要注意将 store 分割成模块，并使用 getter、action 等功能处理异步操作，从而使我们的代码更加模块化和可维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64feb16295b1f8cacdd60c34