简单解读一下,第一次读vuex源码,在vue项目中,main.js通过vue.use(vuex)使用,其实就是把vuex当做一个插件使用了,在vuex中有一个install方法,来看一下这个install方法
function install (_Vue) {
if (Vue && _Vue === Vue) {
if (process.env.NODE_ENV !== 'production') {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
);
}
return
}
Vue = _Vue;
applyMixin(Vue);
}
这个install方法实现了两件事,①避免重复在vue上安装vuex
②调用mixin方法
一起来看applyMixin
function applyMixin (Vue) {
var version = Number(Vue.version.split('.')[0]);
if (version >= 2) {
Vue.mixin({ beforeCreate: vuexInit });
} else {
// override init and inject vuex init procedure
// for 1.x backwards compatibility.
var _init = Vue.prototype._init;
Vue.prototype._init = function (options) {
if ( options === void 0 ) options = {};
options.init = options.init
? [vuexInit].concat(options.init)
: vuexInit;
_init.call(this, options);
};
}
初始化vuex,根据vue版本1.0和2.0,进行了不同的处理,如果是Vue1.0,Vuex会将vuexInit方法放入Vue的_init方法中,而对于Vue2.0,则会将vuexinit混淆进Vue的beforeCreate钩子中。看一下vuexInit方法
function vuexInit () {
var options = this.$options;
// store injection
if (options.store) {
this.$store = typeof options.store === 'function'
? options.store()
: options.store;
} else if (options.parent && options.parent.$store) {
this.$store = options.parent.$store;
}
}
}
vuexInit会尝试从options中获取store,如果当前组件是根组件(Root节点),则options中会存在store,直接获取赋值给
s
t
o
r
e
即
可
。
如
果
当
前
组
件
非
根
组
件
,
则
通
过
o
p
t
i
o
n
s
中
的
p
a
r
e
n
t
获
取
父
组
件
的
store即可。如果当前组件非根组件,则通过options中的parent获取父组件的
store即可。如果当前组件非根组件,则通过options中的parent获取父组件的store引用。这样一来,所有的组件都获取到了同一份内存地址的Store实例,于是我们可以在每一个组件中通过this.$store愉快地访问全局的Store实例了。
下一篇看store的构造函数!!!!