共计 1299 个字符，预计需要花费 4 分钟才能阅读完成。
一、Vuex 是什么
官方定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
通俗理解：
主要应用于 Vue.js 中管理数据状态的一个库
通过创建一个集中的数据存储库（store），供程序中所有组件访问
总结：Vuex 就是在一个项目中，提供唯一的管理数据源的仓库。
二、为什么要用 Vuex
单一使用 Vue.js 的场景
在单一使用 vue.js 的场景中，我们难免要在不同的组件中互相传值。在该场景中，由一个根组件，两个父组件再各自拥有一个子组件，我们如果使用 prop 的属性传值，在这个详情组件需要使用添加组件中的某个值时，我们需要不停的触发某个事件将这个值一层一层一层一层地沿着这个路径传过去，这样能实现将值传递给详情组件，但这是相当的麻烦。现在让我们看下 vuex.js 场景下的效果
使用 Vuex.js 的场景
我们将使用专门的 store 存储所有的数据，如果我们需要取到组件二或更深一级的子组件的某个数据我们可以直接使用 getter 方法直接拿到其中的数据。如果我们需要向 store 中添加或更改某个数据，我们可以用 mutation 或直接 $store.state 的形式直接跨过父组件向 store 中直接添加或更改数据。就好比一个仓库，所有人能直接跨过上级拿到仓库中的某个你所需要的东西，这无疑是在我们使用 vue 开发项目时，相当省时省力的办法。
三、Vuex 的使用场景
当一个组件需要多次派发事件
跨组件 / 跨页面共享数据
在页面数据结构比较复杂，数据和组件分离，分别处理，组件量较大的情况下，那么使用 Vuex 是非常合适的。
四、Vuex 的核心概念
1.store：Vuex 创建的一个集中数据存储库，供程序中所有组件访问
2.state：页面数据状态管理容器对象，页面所需要的数据对象从该对象进行读取；
3.getter：state 的计算属性，可以从 state 中派生出新状态
4.mutation：state 的状态数据对象改变的操作方法，比如将页面的数据存储在 state 对象中，或者改变 state 对象中的数据，都需要通过 mutation 进行操作。该方法只能进行同步操作（提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。）
5.action：操作行为处理模块，通过提交 mutation 来变更状态，可以包含异步操作。（异步逻辑都应该封装到 action 里面）
6.module：store 可以切分成模块，每个模块都可以拥有自己的 state、getter、mutation、action
7.dispatch：操作行为触发方法，是唯一能执行 action 的方法；
8.commit：state 状态改变进行提交的操作方法，对 mutation 进行提交，是唯一能执行 mutation 的方法
五、Vuex 过程解析
过程：
Vue 组件接收交互行为，调用 dispatch 方法触发 action 相关操作处理，若页面的数据状态需要改变，则调用 commint 方法提交 mutation 修改 state，通过 getter 可以获取到 state 对象的新值，重新渲染 vue 组件，界面随之更新。
