在 Vue.js 应用中使用 Vuex 来管理状态
在 Vue.js 应用中，状态管理是一个至关重要的问题。随着项目逐渐复杂，全局状态的管理变得越来越困难，轻度开发和维护难度也呈爆炸性增长。Vuex 可以帮我们解决这个问题。
Vuex 是一个为 Vue.js 应用程序开发的状态管理模式。它通过集中式存储管理来解决 Vue.js 应用程序中的状态问题。Vuex 管理的状态都存储在一个单一的地方，这样使我们能够更加方便地追踪状态的变化，也使得信息共享和状态复用变得非常容易。
下面，我们将介绍如何在 Vue.js 应用中使用 Vuex 来管理状态。
安装 Vuex
要使用 Vuex，首先需要安装它。可以通过 npm 安装：
--- ------- ---- ------
在你的项目中引入 Vuex：
------ --- ---- ------ ------ ---- ---- ------- --------------
使用 Vuex
使用 Vuex 的第一步是创建一个 store。store 是一个对象，它包含了应用中所有共享状态的数据。创建一个新的 store 只需传入一个对象即可，该对象包含了 state、mutations、actions、getters 等属性。例如：
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
--------------
--
---------------- -
--------------
-
-
---在 store 中，我们首先定义了 state 对象，它包含了应用中所有的状态数据。在这个例子中，我们只定义了一个名为 count 的状态变量并将它初始化为 0。
接下来，我们定义了两个 mutations，它们是用于修改状态数据的方法。在这个例子中，我们定义了 increment 和 decrement 两个 mutations，分别用于增加和减少计数器的值。
mutations 是 Vuex 中最重要的一个概念。它们是唯一允许修改 Vuex store 中的数据的方法。每个 mutation 都接收当前的 state 作为第一个参数，而使用方法时，可以简单地调用 committed 函数并传入 mutation 的名称。例如：
--------------------------
使用 Actions
mutations 只能同步修改 state 中的数据，如果我们需要进行异步操作，就需要使用 Actions。Actions 类似于 mutations，它也封装了一段处理逻辑，不过与 mutations 不同的是，Actions 用于提交 mutations。例如：
----- ----- - --- ------------
-------
------ -
--
---------- -
---------------- -
--------------
-
--
-------- -
----------------------- -
--------------------- -
----------------------------
-- ------
-
-
---在这个例子中，我们定义了一个异步的 action，它被命名为 asyncIncrement。在 asyncIncrement 方法中，我们调用了 setTimeout 函数，并在 1 秒后调用了 commit 函数来触发 increment mutations。
如果我们要从组件中调用 asyncIncrement，可以这样写：
---------------------------------
使用 Getters
在 Vuex 中，Getters 用于从 store 获取数据。Getters 可以接收 state 对象作为第一个参数，用于派生或计算 store 中的状态。例如：
----- ----- - --- ------------
------ -
------ -
- --- -- ----- ----- --- ----- ---- --
- --- -- ----- ----- --- ----- ----- -
-
--
-------- -
---------- ----- -- -
------ ----------------------- -- -----------
-
-
---在这个例子中，我们定义了一个 doneTodos getter。通过调用这个 getter，我们可以获得已完成的 todo 项的列表信息：
------------------------
在 Vue.js 组件中使用 Vuex
使用 Vuex，我们可以轻松地在 Vue.js 组件中使用全局状态。我们只需要在组件中调用 Vuex 中的状态数据即可。例如：
----------
------- ----- --------
-----------
--------
------ ------- -
--------- -
------- -
------ ------------------------
-
-
-
---------在这个例子中，我们使用了 Vue.js 的 computed 属性来绑定 Vuex store 中的 count 状态数据。
结论
在 Vue.js 应用程序中使用 Vuex 来管理状态是一种非常高效、方便的方式。通过集中管理状态，我们可以在应用程序中更好地快速调整、维护和开发状态，同时也为代码设计提供了更高的可复用性和标准化程度。有了 Vuex，我们的应用程序状态管理就更加完善了。
示例代码
----------
-----
------- -----------------------------
-------- ----- ---------
------- -----------------------------
------
-----------
--------
------ ------- -
--------- -
------- -
------ ------------------------
-
--
-------- -
----------- -
--------------------------------
--
------------
--------------------------------
-
-
-
---------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670e0c3f5f551281025f7bb0