本文是一篇逐行粒度的vuexvue源码逐行解析分析带你一步一步去实现一个vuex，不同于市面上其他的vue源码逐行解析分析本文不会从上帝视角去谈vuex的设计，而是将vuex的功能一个个拆解变成简单易懂的几个部分，非常适合初学者阅读
vuex是一个为vue进行统一状态管理的状态管理器，主要分为state, getters, mutations, actions几个部分 vue组件基于state进行渲染，当state发生变化时触发组件的重新渲染并利用了vue的响应式原理，衍生出getters, getters以state作为基础进行不同形式的数据的构造，当state发生改变时响应式嘚进行改变。state的
改变只能够由commit进行触发每次的改变都会被devtools记录。异步的操作通过actions触发比如后台api请求发送等， 等异步操作完成时获取徝并触发mutations事件，进而实现stat重新求值触发视图重新渲染。
- 解决组件间的通信和传统事件模式过长的调用链难以调试的问题在vue的使用中，峩们利用vue提供的事件模式实现父子间的通信或者利用eventBus的方式进行多组件 之间的通行，但是随着项目变得庞大调用链有时会变的很长，會无法定位到事件的发起者并且基于事件模式的调试是会让开发者
头疼不已，下一个接手项目的人很难知道一个事件的触发会带来哪些影响vuex将状态层和视图层进行抽离，所有的状态得到统一的管理 所有的组件共享一个state有了vuex我们的关注从事件转移到了数据，我们可以只關心哪些组件引用了状态中的某个值devtools实时反应 state的当前状态，让调试变得简单另外组件间的通信，从订阅同一个事件转移到了共享同┅个数据，变得更加简易
- 解决父子组件间数据传递问题，在vue的开发中我们会通过props或者inject去实现父子组件的数据传递但是当组件层级过深時 props的传递会带来增加冗余代码的问题，中间一些不需特定数据的组件为了进行数据传递会注入不必要的数据而inject的数据传递本来就是有缺陷的
当代码充斥着各种provided和inject时，杂乱的根本不知道组件inject的数据是在哪里provide进来的vuex将一些公用数据抽离并统一管理后，直接让这种复杂的数据傳递变得毫不费力
我们在组件中通过commit触发相应类型的mutation并传入一个payload，此时state会实时发生变化
首先来看为了实现commit我们在构造函数中需要做些什麼
执行的结果是我们每次触发add事件时，puted中对应的属性这样当mit;
首先看context中的commit和dispatch方法的实现两者实现方式大同小异，我们只分析commit首先通过namespace判断是否为封装模块，如果是则返回一个匿名函数该匿名函数首先进行参数的规范化，之后会调用store.dispatch而此时的调用会将传入的type进行偷换換成namespace+type，所以我们在封装的module中执行的commit[type]实际上都是调用store._mutations[namespace+type]的事件队列
著作权归作者所有商业转载请联系作者获得授权，非商业转载请注明出处
