大话Vuex

一、Vuex是什么

官方定义：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

通俗理解：

1. 主要应用于Vue.js中管理数据状态的一个库
2. 通过创建一个集中的数据存储库（store），供程序中所有组件访问

总结：Vuex就是在一个项目中，提供唯一的管理数据源的仓库。

二、为什么要用Vuex

单一使用Vue.js的场景

在单一使用vue.js的场景中，我们难免要在不同的组件中互相传值。在该场景中，由一个根组件，两个父组件再各自拥有一个子组件，我们如果使用prop的属性传值，在这个详情组件需要使用添加组件中的某个值时，我们需要不停的触发某个事件将这个值一层一层一层一层地沿着这个路径传过去，这样能实现将值传递给详情组件，但这是相当的麻烦。现在让我们看下vuex.js场景下的效果

使用Vuex.js的场景

我们将使用专门的store存储所有的数据，如果我们需要取到组件二或更深一级的子组件的某个数据我们可以直接使用getter方法直接拿到其中的数据。如果我们需要向store中添加或更改某个数据，我们可以用mutation或直接$store.state的形式直接跨过父组件向store中直接添加或更改数据。就好比一个仓库，所有人能直接跨过上级拿到仓库中的某个你所需要的东西，这无疑是在我们使用vue开发项目时，相当省时省力的办法。

三、Vuex的使用场景

1. 当一个组件需要多次派发事件
2. 跨组件/ 跨页面共享数据

在页面数据结构比较复杂，数据和组件分离，分别处理，组件量较大的情况下，那么使用 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组件，界面随之更新。

如果你觉得这篇文章对你有所帮助，那就顺便点个赞吧，点点关注不迷路~

黑芝麻哇，白芝麻发，黑芝麻白芝麻哇发哈！

前端哇发哈