vuex的原理

每天一个前端面试题之 vuex的原理

当我想要去理解底层原理，想要去理解源码的时候，真的还是遇到了很多困难的，总觉得怎么理解也理解不透彻。所以这一篇我尽量的写清楚自己的理解，但是仍然有些地方是写不清楚的。随着后续的学习，会继续补充的！

一、vuex简介

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

那什么时候用vuex呢？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如用户的登录状态、用户名称、用户头像，地理位置等信息通常由vuex管理，商品的收藏、购物车中的商品等通常也放入在vuex中。但是如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。所以，如果开发的应用比较简单，没必要引入vuex，通过组件间的通信就可以了。

二、vuex的组成

vuex由六个部分组成。

1. state：state是存储的单一状态，是存储的基本数据。

2. getters：getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3. mutations：mutations提交更改数据，使用store.commit方法更改state存储的状态。mutations是同步函数，其中不允许存在异步操作。需要注意的是，提交mutations是更新vuex的store唯一方式。mutations的唯一目的就是修改state中的状态。

4. actions：actions像一个装饰器，提交mutation，而不是直接变更状态。其执行方法为store.dispatch（actions可以包含任何异步操作）

5. modules：modules是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。子模块的状态、方法都是直接注册到根模块的，所以同名的方法会依次被调用，调用子模块的状态$store.state.子模块名.要获取的值，调用子模块的getter$store.getters.方法名字。

除了以上5部分，vuex还提供了一些辅助函数，比如mapState、mapGetters、mapActions、mapMutations等。具体可以参考https://vuex.vuejs.org/zh/api/#mapstate

3.vuex的基本原理

设计思想：借鉴了Flux、Redux，将数据存放到全局的store，再将store挂载到每个vue实例组件中，利用Vue.js的细粒度数据响应机制来进行高效的状态更新。
核心思想图为：