在 Vue.js 中，随着项目规模的扩大，我们会面临一个前端开发的核心问题——全局状态管理。为了解决这样的问题，Vue.js 团队推出了 Vuex 库。Vuex 是一个专为 Vue.js 应用程序开发的集中式状态管理解决方案，它能够统一管理 Vue.js 长范围内的全部数据。
Vuex 的核心概念
Vuex 的最基本的概念是 store（仓库），这个 store 就是存储 Vue.js 应用的所有状态的地方。在一个 Vuex 应用中，store 仅仅是一个唯一的对象。
Vuex 中的 state 类似于组件中 data 属性，都是用来存储状态的。但是它并不能直接被改变，只能通过 mutations 中的方法来修改。
mutations 中的方法是唯一可以改变状态的地方。由于直接改变状态的代码是容易被跟踪和调试的，因此 Vuex 强制使用显式创建和调用 mutations 的方式来改变状态。
getters 可以看作是 store 的计算属性。它们的返回值基于 state 的值，且只有当它们的依赖发生改变时才会重新计算。它们也被缓存起来，只有在它们所依赖的值发生改变时才会重新计算。
actions 是用来触发 mutations 中方法的。但是 actions 和 mutations 的区别在于它不会直接修改状态，而是通过提交 mutations 来触发状态的变更。
Vuex 实现全局数据状态管理的步骤
Step 1: 安装 Vuex
Vuex 库可以通过 npm 来安装：
npm install --save vuex
Step 2: 组织 store
Vuex 的核心就是 store。我们需要把 Vue.js 项目中所有的状态都放到 store 中，这里我们可以新建一个 store.js 文件。
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
------ -
--
---------- -
---------------- -
--------------
-
--
-------- -
------------------- -
--------------------
-
--
-------- -
-------------
------ ------------
-
-
--
------ ------- -----从上面的代码中，我们可以看到 store 的基本结构，分别是 state、mutations、actions 和 getters。
Step 3：在 Vue.js 中使用 store
在 Vue.js 中使用刚刚创建的 store 是很容易的。只需要在 Vue 实例中注入 store 就可以了。
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ----- ---- --------- --- ----- --- ------- ------ ------- - -- ------ --
在注册Vue实例之后，我们就可以在任何Vue组件中使用Vuex，比如：
-- -------------------- ---- -------
----------
-----
------------ -- ----- -------
------- ------------------------ ----------
------
-----------
--------
------ ------- -
----- ----------
--------- -
------- -
------ --------------------------
-
--
-------- -
----------- -
----------------------------------
-
-
-
---------在上面的代码中，我们使用了 store 中的 state 和 actions 方法来获取和修改全局状态。
总结
通过上面的学习，我们已经可以用 Vuex 来管理你的 Vue.js 项目了，通常情况下，我们的项目状态都会比较复杂，但是在 Vuex 中，你可以把它们相互独立并且轻松解耦，同时保持视图和状态同步。
因此，在Vue.js的大型项目中，我们一定要充分利用 Vuex 进行全局状态管理，这样可以使得我们的代码更加简单、可维护性和扩展性更强。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eff47af6b2d6eab39df219