在 Vue.js 中，我们经常需要管理状态（例如：应用程序级别的状态、用户信息等等），并且应该遵循单一责任原则（Single Responsibility Principle，SRP）来开发我们的应用程序。为了解决这些问题，Vuex 应运而生。
Vuex 是一个专门为 Vue.js 应用程序设计的状态管理模式（State Management Pattern）。它集成在 Vue.js 核心库之外，因此您需要单独安装和导入它。 Vuex 允许我们在应用程序中按照指导性原则维护所有组件的状态和信息。如果您使用过 Flux/Redex，那么您会马上明白这个概念。如果你对 Flux/Redux 概念不是很清楚，不要担心，在本篇文章中我会解释一下。
Vuex 概念
在理解 Vuex 的工作原理之前，我们先来看一下 Vuex 中的一些基本概念：
State
一个 Vuex 应用程序的中央存储是一个 “store”，它包含组件的状态。类似于 Vue 组件的 data 属性，Vuex store 中的 state 对象存储应用程序的状态。
const store = new Vuex.Store({
state: {
count: 0
}
})Getters
Vuex 中的 getters 类似于组件中的计算属性（computed properties），它们允许您计算 store 中的派生状态并将其作为 store 中的属性缓存起来。Getters 接受一个 state 参数，用于获取 store 中的状态。
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
- --- -- ----- ------ ----- ---- --
- --- -- ----- ------ ----- ----- --
-
--
-------- -
---------- ----- -- -
------ ----------------------- -- ----------
-
-
--Mutations
Vuex 中的 mutations 是 store 中唯一允许同步更改状态的方法。每个 mutation 都有一个字符串类型的事件类型，以及一个回调函数，它接受当前的 state 作为第一个参数。
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
-
--Actions
在 Vuex 应用程序中进行异步操作（例如 Ajax 调用）的方式是使用 actions。actions 类似于 mutations，不同之处在于 actions 可以包含任意的异步操作。
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
-------------- -- ------ -- -
------------- -- -
-------------------
-- -----
-
-
--Modules
有时候，我们的应用程序会变得非常复杂，store 对象中的 state、mutations、actions 也会变得非常庞大。为了应对这种情况，Vuex 支持将 store 分割成模块，并且每个模块都可以拥有自己的 state、mutations、actions、getters。
-- -------------------- ---- -------
----- ------- - -
------ - --- --
---------- - --- --
-------- - --- --
-------- - --- -
-
----- ------- - -
------ - --- --
---------- - --- --
-------- - --- -
-
----- ----- - --- ------------
-------- -
-- --------
-- -------
-
--Vuex 和 Vue.js 的联系
Vuex 和 Vue.js 深度整合，几乎需要理解和使用 Vue.js 才能理解和使用 Vuex。将 state 状态集中管理，数据同步处理，Vuex 与 Vue.js 中 vnode 数据结构系统间不存在相互冲突，解决了父子组件通信问题。如果你使用 Vuex 管理状态，那么您不需要构建自定义的事件总线或 watch 属性。
Vuex 和 Vue.js 的区别
- 数据存储位置不同
Vue.js 的数据存储位置就是你实例中定义的 data 中。而 Vuex 利用了一个全局单例模式，仓库 store，就可以存储全部数据。
- 数据传入组件方式不同
$emit 和 $emit 的代替品 $dispatch 以及 $broadcast 等。在 Vuex 中，方法和数据都是通过仓库 store 传递到每个组件中。
- 数据状态管理不同
在 Vue.js 中，你需要使用 Watcher 来监视改变的数据，以及打开大量的 $watch 函数来监视多个数据的变化。在 Vuex 中，你可以把你的数据状态分离出来。
总结
Vuex 是一个简单而强大的状态管理库，它解决了 Vue.js 应用程序的状态管理问题，并为您提供了一个强大的状态管理系统，使您可以更加高效地开发 Vue.js 应用程序。
您可以在 Vuex 文档中找到更多信息，该文档提供了深入的解释和示例代码。
您现在应该能够理解 Vuex 和 Vue.js 之间的区别和联系，并且很快就能开始使用 Vuex 来管理您的 Vue.js 应用程序的状态！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbaec0f6b2d6eab31eb5dc