各位看官 没看过功能梳理的能够先阅读下 Vuex源码学习(二)脉络梳理.vue
在Vue插件如何被注册到Vue上呢? 使用usevuex
// 正确的注册插件方式:
Vue.use(Vuex);
// 这里会执行Vuex的install方法。
复制代码
咱们来看一下install函数的代码bash
先解决两个小问题 _Vue是什么?app
_Vue是注册插件时,被传递进来的Vue构造函数,框架
为何声明Vue变量? 声明Vue这个变量的意义是在Vuex内部不引入Vue这个构造函数(Vue框架的代码), 而是等待Vue.use(Vuex)以后把外部引入的Vue对象传递进去。 给Vue对象的赋值操做只有在install函数内,因此Vue变量存在而且等于_Vue(这个外部传递进来的Vue构造函数)的话,表明Vuex已经完成了install, 就会有一个提示。函数
引起想法 注册Vuex插件与实例化Vuex.Store构造函数前后顺序post
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函数作了什么学习
上代码ui
我没有使用过Vue1.0版本,因此就对Vue2.0版本进行一个解释吧,this
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
}
}
复制代码
install函数的意义?
Vuex注册的时候,必需要暴露出这个方法,供Vue使用。
install函数作了什么?
判断Vuex是否已经注册,注册过就再也不注册,
Vue2.0给每一个Vue组件的beforeCreate生命周期中增长vuexInit函数, 给每一个Vue组件上挂载一个$store对象,所有都指向Vuex的Store实例化的对象。
下一章讲述ModuleCollection类作了什么