005-vuex是如何实现严格模式的?

首先介绍一下什么是vuex的严格模式?
在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。也就说想要改变状态,必须要使用mutation函数。

那么vuex是如何实现严格模式的呢?
一、首先要开启严格模式。

const store = new Vuex.Store({
  // ...
  strict: true
})

用户实例化Store的时候传入strict为true就开启了严格模式

二、接收参数

const {
      strict = false
    } = options

// strict mode
    this.strict = strict

 // enable strict mode for new vm
  if (store.strict) {
    enableStrictMode(store)
  }

接收参数,如果strict就调用enableStrictMode方法

三、enableStrictMode实现

function enableStrictMode (store) {
  store._vm.$watch(function () { return this._data.$$state }, () => {
    if (process.env.NODE_ENV !== 'production') {
      assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
    }
  }, { deep: true, sync: true })
}
// util.js里提供的
export function assert (condition, msg) {
  if (!condition) throw new Error(`[vuex] ${msg}`)
}

这个方法主要有两点,一个是$watch,这个功能是vue提供的,另一个是assert,总结分析就是改变this._data.$$state的时候,store._committing必须为true,否则就警报。接下去就分析store._committing。

四、store._committing分析

this._committing = false

_withCommit (fn) {
    const committing = this._committing
    this._committing = true
    fn()
    this._committing = committing
  }

刚开始的时候,这个变量设置为false,如果要改变数据包装一个_withCommit方法,执行方法之前,将this._committing设置true,执行完了之后改回false.

五、使用_withCommit封装函数

store._withCommit(() => {
  Vue.set(parentState, moduleName, module.state)
})

源码里其他地方也用了_withCommit。

所以vuex实现严格模式的原理就是改变状态的时候,标记一个变量是否为true。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue...
    染陌同学阅读 1,688评论 0 12
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,497评论 0 7
  • 上一章总结了 Vuex 的框架原理,这一章我们将从 Vuex 的入口文件开始,分步骤阅读和解析源码。由于 Vuex...
    你的肖同学阅读 1,836评论 3 16
  • Vuex源码阅读分析 Vuex是专为Vue开发的统一状态管理工具。当我们的项目不是很复杂时,一些交互可以通过全局事...
    steinslin阅读 652评论 0 6
  • Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有...
    skycolor阅读 891评论 0 1