详解vuex之store源码简单解析

2020-06-14 06:28:14易采站长站整理

关于vuex的基础部分学习于https://www.jb51.net/article/163008.htm

使用Vuex的时候,通常会实例化Store类,然后传入一个对象,包括我们定义好的actions、getters、mutations、state等。store的构造函数:


export class Store {
constructor (options = {}) {
// 若window内不存在vue,则重新定义Vue
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}

if (process.env.NODE_ENV !== 'production') {
// 断言函数,来判断是否满足一些条件
// 确保 Vue 的存在
assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
// 确保 Promsie 可以使用
assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
assert(this instanceof Store, `store must be called with the new operator.`)
}

// 解构赋值,拿到options里的plugins和strict
const {
plugins = [],
strict = false
} = options

// 创建内部属性
// 标志一个提交状态,作用是保证对 Vuex 中 state 的修改只能在 mutation 的回调函数中,而不能在外部随意修改 state
this._committing = false
// 用来存储用户定义的所有的actions
this._actions = Object.create(null)
this._actionSubscribers = [] // 用来存储用户定义所有的mutatins
this._mutations = Object.create(null)
// 用来存储用户定义的所有getters
this._wrappedGetters = Object.create(null)
// 用来存储所有的运行时的 modules
this._modules = new ModuleCollection(options)
this._modulesNamespaceMap = Object.create(null)
// 用来存储所有对 mutation 变化的订阅者
this._subscribers = [] // 一个 Vue对象的实例,主要是利用 Vue 实例方法 $watch 来观测变化的
this._watcherVM = new Vue()

// 把Store类的dispatch和commit的方法的this指针指向当前store的实例上
const store = this
const { dispatch, commit } = this
this.dispatch = function boundDispatch (type, payload) {
return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
return commit.call(store, type, payload, options)
}

// 是否开启严格模式
this.strict = strict

const state = this._modules.root.state

// Vuex的初始化的核心,其中,installModule方法是把我们通过options传入的各种属性模块注册和安装;
// resetStoreVM 方法是初始化 store._vm,观测 state 和 getters 的变化;最后是应用传入的插件。
installModule(this, state, [], this._modules.root)

resetStoreVM(this, state)
plugins.forEach(plugin => plugin(this))

const useDevtools = options.devtools !== undefined ? options.devtools : Vue.config.devtools