在 Vue.js 中，随着应用程序的复杂性不断增加，我们需要一种更好的方式来管理全局状态。Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它可以帮助我们更好地组织和管理我们的代码。
什么是 Vuex？
Vuex 是一个状态管理模式和库，它可以帮助我们更好地管理应用程序的状态。它将应用程序的状态存储在一个单一的地方，并且提供了一种可预测的方式来修改状态。Vuex 通过使用 mutations 来修改状态，这些 mutations 是同步的函数，它们接受当前的状态作为参数，并且可以修改状态。
安装 Vuex
要使用 Vuex，我们需要先安装它。可以通过 npm 或者 yarn 来安装它：
npm install vuex --save
或者
yarn add vuex
使用 Vuex
使用 Vuex 的第一步是创建一个 store。我们可以在 Vue.js 应用程序的入口文件中创建 store：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
-------------
-
--
-------- -
------------------ -
---------------------------
-
--
-------- -
--------------- -
------ -----------
-
-
--
------ ------- -----在上面的代码中，我们首先导入了 Vue 和 Vuex，并且使用了 Vue.use(Vuex) 来注册 Vuex。然后我们创建了一个 store，它有三个属性：state、mutations 和 actions。
state 是一个对象，它包含了应用程序的状态。在上面的代码中，我们创建了一个叫做 count 的属性，它的初始值为 0。
mutations 是用来修改状态的函数。在上面的代码中，我们创建了一个叫做 increment 的 mutation，它可以将 count 的值加 1。
actions 是用来触发 mutations 的函数。在上面的代码中，我们创建了一个叫做 increment 的 action，它可以触发 increment mutation。
getters 是用来获取状态的函数。在上面的代码中，我们创建了一个叫做 getCount 的 getter，它可以获取 count 的值。
在组件中使用 Vuex
在组件中使用 Vuex 非常简单。我们可以使用 computed 属性来获取状态，使用 methods 属性来触发 actions。
-- -------------------- ---- -------
----------
-----
--------- -- ----- ------
------- ------------------------------------------
------
-----------
--------
------ ------- -
--------- -
------- -
------ ----------------------------
-
--
-------- -
---------------- -
---------------------------------
-
-
-
---------在上面的代码中，我们首先使用 computed 属性来获取 count 的值，它调用了 getCount getter。然后我们使用 methods 属性来触发 increment action。
总结
在本文中，我们学习了如何使用 Vuex 来管理全局状态。我们首先介绍了 Vuex 是什么，然后学习了如何安装和使用 Vuex。最后，我们展示了如何在组件中使用 Vuex。
使用 Vuex 可以帮助我们更好地组织和管理我们的代码，它可以让我们的应用程序更加可预测和可维护。如果你是一个 Vue.js 开发者，我强烈建议你学习和使用 Vuex。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653c1a9d7d4982a6eb652e06