13518219792
这篇文章将为大家详细讲解有关vuex之store的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联主营芗城网站建设的网络公司,主营网站建设方案,重庆APP开发公司,芗城h5微信小程序搭建,芗城网站营销推广欢迎芗城等地区企业咨询
使用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
if (useDevtools) {
devtoolPlugin(this)
}
}Vuex本身是单一状态树，应用的所有状态都包含在一个大对象内，随着我们应用规模的不断增长，这个Store变得非常臃肿。为了解决这个问题，Vuex允许我们把store分模块。每一个模块包含各自的state、mutations、actions和getters，甚至还可以嵌套模块。
接下来看installModule方法：
function installModule (store, rootState, path, module, hot) {
// 通过path数组的长度判断是否为根
const isRoot = !path.length
const namespace = store._modules.getNamespace(path)
// register in namespace map
if (module.namespaced) {
store._modulesNamespaceMap[namespace] = module
}
// 第一次调用时，path为空，不进入if
// 递归调用installModule安装子模块时，将执行该代码块
if (!isRoot && !hot) {
const parentState = getNestedState(rootState, path.slice(0, -1))
// 模块名
const moduleName = path[path.length - 1]
// 把当前模块的state添加到parentState中。具体解析见下
store._withCommit(() => {
Vue.set(parentState, moduleName, module.state)
})
}
const local = module.context = makeLocalContext(store, namespace, path)
// 对mutations、actions、getters进行注册
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
module.forEachAction((action, key) => {
const type = action.root ? key : namespace + key
const handler = action.handler || action
registerAction(store, type, handler, local)
})
module.forEachGetter((getter, key) => {
const namespacedType = namespace + key
registerGetter(store, namespacedType, getter, local)
})
// 遍历modules，递归调用installModule安装子模块
module.forEachChild((child, key) => {
installModule(store, rootState, path.concat(key), child, hot)
})
}
store的_withCommit方法定义是这样的:
_withCommit (fn) {
const committing = this._committing
this._committing = true
fn()
this._committing = committing
}Vuex中所有对state的修改都会用_withCommit函数包装，保证在同步修改state的过程中this._committing的值始终为true。这样当我们观测 state的变化时，如果this._committing的值不为true，则能检查到这个状态修改是有问题的。
关于“vuex之store的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
