前言
随着单页面应用越来越流行，前端应用的规模不断增大，状态管理已经成为了一个必备的部分。Vuex 是一个专为 Vue.js 设计的状态管理库，它可以方便的集中管理 Vue.js 应用中的所有组件的状态。本文将介绍 Vuex 的原理、安装和使用，让你更好的进行前端开发。
核心概念
Vuex 的核心概念分为五个：state、getters、mutations、actions 和 modules。
- state：状态存储库。即一个JavaScript对象，它包含我们组件的应用程序级别状态。可以通过 $store.state 访问。
- getters：和 state 一样，getters 也表示存储库。但是 getters 获取的状态不仅仅只是 state 的副本，而是需要通过某种逻辑操作等获取。所以 getters 可以理解为 store 的计算属性，它们的返回值将缓存，只有从对应的依赖项发生更改时才会重新进行计算。
- mutations：用于同步更改状态。实质上就是一个设置状态的纯函数（接受状态作为第一个参数）。不可以进行异步操作，因为每一个 mutation 都是同步执行的。
- actions：用于异步调用 mutations，提交 mutation 请求，以便通过用户操作、网络请求等触发的间接事件去改变状态。mutations 只能同步执行，但是 actions 可以包含任何异步请求组合。
- modules：严格组织代码，避免它们膨胀到无法管理。对于每个子模块，都有一组自己的 mutation、action 和 getter。
安装
安装 Vuex 很简单，只需在终端运行下面的命令即可。
npm install vuex --save
基本使用
使用 Vuex 首先要创建一个 store，然后将其添加到 Vue 实例中即可。下面是一个最基本的使用。
-- -------------------- ---- -------
-- --------
------ --- ---- -----
------ ---- ---- ------
-------------
------ ------- --- ------------
------ -
------ -
--
---------- -
---------------- -
-------------
-
--
-------- -
------------------ -
---------------------------
-
--
-------- -
------ ----- -- -----------
-
--
-- -------
------ --- ---- -----
------ ----- ---- ------------
------ --- ---- -----------
------------------------ - -----
--- -----
------
------- - -- ------
-----------------上述代码定义了一个最基本的 store，它包含了一个 count 的状态和一个 add 方法。在 main.js 中将其引入，在所有子组件中都可以使用 $store 变量去访问，如下所示。
-- -------------------- ---- -------
-- -------
----------
-----
------ ----- -------
------- -------------------------
------
-----------
--------
------ ------- -
----- ------
--------- -
------- -
------ -------------------------
-
--
-------- -
----- -
---------------------------------
-
-
-
---------增加 modules
如果应用程序规模增大，只有一个对象维护状态就显得非常的不爽了。为了解决这个问题，我们可以将 store 对象拆分成多个子模块，每个子模块维护自己的状态和 mutation/actoin/getter。假设我们有一个应用程序有两个子页面：项目页面和用户页面，我们可以将其定义为两个子模块，如下图所示。
代码如下：
-- -------------------- ---- -------
-- --------
------ --- ---- -----
------ ---- ---- ------
------ ---- ---- ----------------
------ ------- ---- -------------------
-------------
------ ------- --- ------------
-------- -
-----
-------
-
--子模块维护其自己的状态和 getter，在 modules 文件夹中新建子模块的模块，如下所示。
-- -------------------- ---- -------
-- -------
----- ----- - -
------ --
-
----- ------- - -
------ ----- -- -----------
-
----- --------- - -
--------------- ----- -
----------------------
-
-
----- ------- - -
---------------- ----- -
-------------------------- -----
-
-
------ ------- -
------
--------
----------
-------
-项目模块同理，通过拆分各个子模块即可组成一个完整的 store。
总结
本文简单介绍了 Vuex 的原理和基础使用。在实际使用中，对于大型的前端应用来说，合理使用 Vuex 可以方便的管理应用中的各种状态，实现可维护性高的代码。在使用中，我们要熟悉各种基本概念，例如在 Vue 中如何获取 store 中的状态，如何按照模块拆分 store 对象等等。并在最终开发中合理运用 Vuex，写出高质量的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649cceb648841e9894980dc2