VUEX 3.x源码分析——9. 严格模式

最新推荐文章于 2024-09-11 15:33:18 发布

重生之我是蔡经理

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量319

点赞数 4

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/miyagiSimple/article/details/139394281

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这是对vuex3版本的源码分析。
本次分析会按以下方法进行：

按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

源码分析

初始化时，暴露一个strict的对象，其类型是布尔值。
当strict为true时，会在执行resetStoreState函数时，激活enableStrictMode函数。
resetStoreState函数生成一个vue的watch监视器，监视对象为state，回调函数使用了_committing方法，选项为深度监控+同步执行。
这里就解锁了_withCommit函数的作用，以及为什么直接修改state时，vuex会抛出错误。
store._committin默认为false，只有调用_withCommit时才会临时改成true。从而保证了在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。

// ./store-util.js
export function resetStoreState(store, state, hot) {
    ...
    if (store.strict) {
        enableStrictMode(store)    
    }
}
function enableStrictMode(store) {
    watch(
        () => store._state.data,
        () => {
            if (__DEV__) {
                assert(store._committing, 'do not mutate vuex store state outside mutation handlers.')            
            }        
        },
        {deep: true, flush: 'sync'}    
    )
}
// ./util.js
export function assert(condition, msg) {
    if (!condition) {
        throw new Error(`[vuex] ${msg}`)    
    }
}

// ./store.js
export class Store {
	constructor(options = {}) {
		this._committing = false
		...
	}
	_withCommit (fn) {
	    const committing = this._committing
	    this._committing = true
	    fn()
	    this._committing = committing
  	}
}