各位看官 没看过脉络梳理的能够先阅读下
Vuex源码学习(二)脉络梳理.vue
在Vue插件如何被注册到Vue上呢?
使用usevuex
// 正确的注册插件方式: Vue.use(Vuex); // 这里会执行Vuex的install方法。
咱们来看一下install函数的代码segmentfault
这块一共作了两件事情:app
先解决两个小问题
_Vue是什么?框架
_Vue是注册插件时,被传递进来的Vue构造函数,函数
为何声明Vue变量?
声明Vue这个变量的意义是在Vuex内部不引入Vue这个构造函数(Vue框架的代码),
而是等待Vue.use(Vuex)以后把外部引入的Vue对象传递进去。
给Vue对象的赋值操做只有在install函数内,因此Vue变量存在而且等于_Vue(这个外部传递进来的Vue构造函数)的话,表明Vuex已经完成了install,
就会有一个提示。学习
引起想法
注册Vuex插件与实例化Vuex.Store构造函数前后顺序ui
Vue.use(Vuex) export default new Vuex.Store({ state : { tryData : 'recruitment', }, modules : { list : moduleList, set : moduleSet } }); // 没有问题
export default new Vuex.Store({ state : { tryData : 'recruitment', }, modules : { list : moduleList, set : moduleSet } }); Vue.use(Vuex) //会报错
安装作了什么就要去看applyMixin函数作了什么this
上代码spa
核心 -> vuexInit
我没有使用过Vue1.0版本,因此就对Vue2.0版本进行一个解释吧,
if (version >= 2) { // 2.0版本以上 经过mixin的方式在每一个Vue对象的beforeCreate生命周期执行的时候完成vuex初始化 Vue.mixin({ beforeCreate: vuexInit }) }
function vuexInit () { // 获取当前Vue对象的options const options = this.$options // store injection // 根结点对象的options上会被挂载store,在new Vue的时候作的 if (options.store) { // 把根结点上的store传递给组件的$store属性上,访问的是同一个对象 this.$store = typeof options.store === 'function' ? options.store() : options.store } else if (options.parent && options.parent.$store) { // 不是根结点,那么从这个节点的父节点上拿到$store传递给子节点 // Vue这个组件树是从根结点向下一层一层的生成Vue对象的,因此根结点有根结点的儿子节点就会有$store属性, //同理这些节点的子节点也会有$store, //最后每个Vue的实例对象都会有$store属性, //所有都指向同一个对象,就是那个被实例化的Vuex内的store对象。 this.$store = options.parent.$store } }
Vuex注册的时候,必需要暴露出这个方法,供Vue使用。
判断Vuex是否已经注册,注册过就再也不注册,
Vue2.0给每一个Vue组件的beforeCreate生命周期中增长vuexInit函数,
给每一个Vue组件上挂载一个$store对象,所有都指向Vuex的Store实例化的对象。
下一章讲述ModuleCollection类作了什么