You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
if (process.env.NODE_ENV !== 'production') {
assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
assert(this instanceof Store, `store must be called with the new operator.`)
}
const {
plugins = [],
strict = false
} = options
// strict mode
this.strict = strict
const state = this._modules.root.state
// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)
// initialize the store vm, which is responsible for the reactivity
// (also registers _wrappedGetters as computed properties)
resetStoreVM(this, state)
// apply plugins
plugins.forEach(plugin => plugin(this))
if (Vue.config.devtools) {
devtoolPlugin(this)
}
构造函数Store
在我们使用vuex时,通常是这样:
实例化一个Store类,传入的也就是我们定义好的 actions、getters、mutations、state等,甚至当我们有多个子模块的时候,我们可以添加一个 modules 对象。所以最核心的部分就是Store类了。
因为内容比较多,所以一定要分开一部分一部分看。
先总的看store.js中定义的store类
![image](https://user-images.githubusercontent.com/21165482/40168604-753a6d1c-59f6-11e8-9b0e-1875573f0107.png)
虽然代码有很多,但是并不是一下子就用到,在我们new一个store实例的时候,传入一个对象,会先调用constructor方法。
constructor
通过代码分析:
第一部分
这一部分显示判断了是否已经执行了install方法,如果没有就重新install。
接下来是在非正式环境利用assert‘断言函数’,判断了Vue、Promise、至于第三个还不是特别明白,等以后明白了在补充吧。
assert‘断言函数’,在util.js中。对条件进行判断,判断为失败,则报错。
非常的简单,但是这种编程方式很优雅。
接下来利用es6 的结构赋值拿到 options 里的plugins 和 strict。plugins 表示应用的插件、strict 表示是否开启严格模式。结合下面的两行代码,分别把模式赋值到本身对象中,以及注入插件。
插件的功能的话就不多说了。严格模式下会观测所有的 state 的变化,建议在开发环境时开启严格模式,线上环境要关闭严格模式,否则会有一定的性能开销。
第二部分
这一部分主要是声明了store内部的一些属性,以及改变dispatch和commit的this指向。
下面这段则是利用call将dispatch和commit方法的this指向知道当前store
第三部分
关于严格模式和插件就不多说了,这里只是多了一个如果检测到devtools就自动注入devtooPlugin。
剩下的也是最重要的就是
installModule
和resetStoreVM
了The text was updated successfully, but these errors were encountered: