Vuex 是一个专门为 Vue.js 设计的状态管理库，它主要用于解决多个组件共享同一状态的问题，避免了组件之间大量的传递属性和回调函数的问题，从而让组件的通信更加简单和清晰。
Vuex 的核心概念
Vuex 中有以下核心概念：
- State：状态，驱动应用的数据源。
- Getter：计算属性，对 state 进行派生，类似于 Vue 实例中的 computed。
- Mutation：变更，用于更改 state 状态，同步地修改状态，由 action 提交 mutation。
- Action：行为，用于提交 mutation，可以包含任意异步操作。
Vuex 的使用
在使用 Vuex 时，需要先安装依赖：
npm install vuex --save
然后在 main.js 文件中进行如下配置：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
-------------- -- ------ -- -
------------- -- -
-------------------
-- -----
-
--
-------- -
------------ ----- -- -
------ ----------- - -
-
-
--
--- -----
--- -------
------
------- - -- ------
--在上面的代码中，我们首先引入了 Vuex，并在 Vue 实例中添加了 store 选项，用来管理全局状态。
我们在 store 中定义了一个状态 count 和三个方法 mutations、actions、getters。
mutations 中定义了一个 increment 方法，这个方法用于同步地修改 count 的值。
actions 中定义了一个 incrementAsync 方法，这个方法用于异步地提交 mutation 中的 increment 方法，延迟执行一秒钟。
getters 中定义了一个 doubleCount 这个计算属性，用来将 state 中的 count 值乘以二后返回。
通过以上步骤的配置，我们就完成了 Vuex 的初始化，接下来我们可以在 Vue 组件中进行使用。
Vuex 在 Vue 组件中的使用
在 Vue 组件中可以通过 this.$store 访问 Vuex 的 store，我们可以通过以下方式对 count 进行修改：
-- -------------------- ---- -------
----------
-----
-- ----- --
------- -----------------------------
------
-----------
--------
------ ------- -
--------- -
----- -- -
------ -----------------------
-
--
-------- -
--------- -- -
-------------------------------
-
-
-
---------上面的代码在模板中引用了 count 状态，并添加了一个按钮，当按钮被点击时会调用 increment 方法。increment 方法中调用了 commit 来提交了一个 mutation，从而修改了 state 中的 count 状态。
另外，如果我们需要异步修改 count 的状态，可以通过以下方法：
-- -------------------- ---- -------
----------
-----
-- ----- --
------- ----------------------------------
------
-----------
--------
------ ------- -
--------- -
----- -- -
------ -----------------------
-
--
-------- -
-------------- -- -
--------------------------------------
-
-
-
---------这里我们调用了 dispatch 方法来提交了一个 action 中的方法 incrementAsync。
Vuex 的拆分
随着应用程序的复杂度的增加，我们的 Vuex 代码也会越来越复杂，这时我们可以将 Vuex 拆分成模块。我们可以创建一个新的模块文件，在该文件中实现模块的各个部分，例如：
-- -------------------- ---- -------
-- ----------------------
----- ----- - -
------ -
-
----- --------- - -
--------- ------- -
-------------
-
-
----- ------- - -
-------------- -- ------ -- -
------------- -- -
-------------------
-- -----
-
-
----- ------- - -
------------ ----- -- -
------ ----------- - -
-
-
------ ------- -
------
----------
--------
-------
-然后在 store 中引入该文件：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ ----- ---- -----------------
-------------
----- ----- - --- ------------
-------- -
-----
-
--在上面代码中，我们使用了 modules 选项将 count 模块引入到了 store 中，这样就可以实现 Vuex 的拆分，让代码更加清晰和易于管理。
总结
通过这篇文章的学习，我们了解了 Vuex 的核心概念和基本使用方式，并学习了 Vuex 在 Vue 组件中的使用和拆分。Vuex 可以帮助我们更好地管理 Vue 应用程序中的状态，提高了应用程序的可靠性和可维护性，同时也使得组件之间的通信更加简单和清晰，是 Vue 中一个很重要的组成部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df1c2df6b2d6eab3a456df