vuex源码分析(二) state及strict属性 详解
state也就是vuex里的值，也即是整个vuex的状态，而strict和state的设置有关，如果设置strict为true，那么不能直接修改state里的值，只能通过mutation来设置
例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
<div id="app">
<p>count:{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state:{count:1}
})
var app = new Vue({
el:"#app",
store,
computed:{
count(){return store.state.count }
}
})
</script>
</body>
</html>
渲染如下:
当我们在控制台修改store.state.coun里的值时页面会自动更新，例如:
此时页面自动更新了，变为了:
我们设置一个strict属性看看:例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.0/dist/vuex.js"></script>
</head>
<body>
<div id="app">
<p>count:{{count}}</p>
</div>
<script>
const store = new Vuex.Store({
state:{count:1},
strict:true //新增一个strict属性，值为true
})
var app = new Vue({
el:"#app",
store,
computed:{
count(){return store.state.count }
}
})
</script>
</body>
</html>
此时渲染如下:
当我们在控制台输入store.state.count=2后，如下:
控制台报错了，页面渲染如下:
可以看到设置strict后，虽然能直接更改vuex里的值，但是会出现一条报错信息，即严格模式下vuex会给出一条提示，提示我们只能通过mutation来修改。
源码分析
writer by:大沙漠 QQ:22969969
我们直接修改state会触发更新以及strict严格模式的控制都是在vuex内部resetStoreVM整个函数内实现的，如下:
function resetStoreVM (store, state, hot) { //重新存储数据
var oldVm = store._vm;
// bind store public getters
store.getters = {}; //给store定义一个getters属性，值为一个对象
var wrappedGetters = store._wrappedGetters; //获取store的所有getter数组信息
var computed = {};
forEachValue(wrappedGetters, function (fn, key) { //遍历wrappedGetters
// use computed to leverage its lazy-caching mechanism
computed[key] = function () { return fn(store); }; //将getter保存到computed里面
Object.defineProperty(store.getters, key, { //设置store.getters的key的访问器属性
get: function () { return store._vm[key]; },
enumerable: true // for local getters
});
});
// use a Vue instance to store the state tree
// suppress warnings just in case the user has added
// some funky global mixins
var silent = Vue.config.silent; //保存Vue.config.silent的配置
Vue.config.silent = true; //设置Vue.config.silent配置属性为true(先关闭警告)
store._vm = new Vue({ //创建new Vue()实例把$$state和computed变成响应式的
data: {
$$state: state
},
computed: computed
});
Vue.config.silent = silent; //将Vue.config.silent复原回去
// enable strict mode for new vm
if (store.strict) { //初始化Strore时，如果给strict传入了true
enableStrictMode(store); //则调用enableStrictMode()函数
}
if (oldVm) {
if (hot) {
// dispatch changes in all subscribed watchers
// to force getter re-evaluation for hot reloading.
store._withCommit(function () {
oldVm._data.$$state = null;
});
}
Vue.nextTick(function () { return oldVm.$destroy(); });
}
}
从上面看到vuex内部创建一个vue对象并把state设置为了data对象里，因此有响应式的功能，而如果传入了strict，则调用enableStrictMode函数，该函数实现如下:
function enableStrictMode (store) { //严格模式下，观察this._data.$$state的变化
store._vm.$watch(function () { return this._data.$$state }, function () { //如果this._data.$$state发生变化时，store._committing不为true,则报错(不是通过vuex的接口来修改时)
{
assert(store._committing, "do not mutate vuex store state outside mutation handlers.");
}
}, { deep: true, sync: true });
}
也就是调用vue.$watch去观察 this._data.$$state的变化，也就是vuex里的state的变化，如果有变化且store._committing不为true则报错
store._committing是vuex里的一个属性，如果是通过mutation修改state时就会设置store._committing为true,否则store._committing为false
vuex源码分析(二) state及strict属性 详解的更多相关文章
- Vue.js 源码分析(十) 基础篇 ref属性详解
ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件实例,例如: ...
- JDK源码分析（12）之 ConcurrentHashMap 详解
本文将主要讲述 JDK1.8 版本 的 ConcurrentHashMap,其内部结构和很多的哈希优化算法,都是和 JDK1.8 版本的 HashMap是一样的,所以在阅读本文之前,一定要先了解 Ha ...
- jQuery源码分析(九) 异步队列模块 Deferred 详解
deferred对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题,比如一些Ajax操作,动画操作等.(P.s:紧跟上一节:https://www.cnblogs.com/grea ...
- Vue.js 源码分析(九) 基础篇 生命周期详解
先来看看官网的介绍: 主要有八个生命周期,分别是: beforeCreate.created.beforeMount.mounted.beforeupdate.updated .beforeDes ...
- Spring源码分析之Bean的创建过程详解
前文传送门: Spring源码分析之预启动流程 Spring源码分析之BeanFactory体系结构 Spring源码分析之BeanFactoryPostProcessor调用过程详解 本文内容: 在 ...
- jQuery 源码分析(十九) DOM遍历模块详解
jQuery的DOM遍历模块对DOM模型的原生属性parentNode.childNodes.firstChild.lastChild.previousSibling.nextSibling进行了封装 ...
- jQuery 源码分析(十) 数据缓存模块 data详解
jQuery的数据缓存模块以一种安全的方式为DOM元素附加任意类型的数据,避免了在JavaScript对象和DOM元素之间出现循环引用,以及由此而导致的内存泄漏. 数据缓存模块为DOM元素和JavaS ...
- vuex源码分析3.0.1(原创)
前言 chapter1 store构造函数 1.constructor 2.get state和set state 3.commit 4.dispatch 5.subscribe和subscribeA ...
- VueX源码分析（5）
VueX源码分析(5) 最终也是最重要的store.js,该文件主要涉及的内容如下: Store类 genericSubscribe函数 resetStore函数 resetStoreVM函数 ins ...
随机推荐
- webUploader的使用
webUploader的使用记录 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML ...
- netty ByteBuf与String相互转换
String转为ByteBuf 1)使用String.getBytes(Charset),将String转为byte[]类型 2)使用Unpooled.wrappedBuffer(byte[]),将b ...
- RocketMQ(4)---RocketMQ核心配置讲解
RocketMQ核心配置讲解 RocketMQ的核心配置在broker.conf配置文件里,下面我们来分析下它. 一.broker.conf配置 下面只列举一些常用的核心配置讲解. 1.broker. ...
- C#面对对象之封装、继承、多态的简单理解
一.封装 隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别. 简单来多,就是讲我们所需要的代码打包封装进入一个类里面,便于我们调用,操作.这就是封装. 这样就隔离了具体 ...
- java基础(27):线程安全、线程同步、等待唤醒机制
1. 多线程 如果有多个线程在同时运行,而这些线程可能会同时运行这段代码.程序每次运行结果和单线程运行的结果是一样的,而且其他的变量的值也和预期的是一样的,就是线程安全的. 我们通过一个案例,演示线程 ...
- JS中new操作符源码实现
首先我们来看一下实例化一个对象做了浏览器做了什么事情 new的四步操作: 1. 创建一个空对象 2. 设置空对象的__proto__属性继承构造函数的prototype属性,也就是继承构造函数的原型对 ...
- Dynamics CRM 2015/2016新特性之七：有了文档模板，打印分析So Easy
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复190或者20160216可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 从CRM 2015 UR1开始, ...
- ORACLE基础之oracle锁（oracle lock mode）详解
ORACLE里锁有以下几种模式: 0:none 1:null 空 2:Row-S 行共享(RS):共享表锁,sub share 3:Row-X 行独占(RX):用于行的修改,sub exclusiv ...
- wsl笔记
目录 环境 修改更新源 新建用户 设置超级用户 环境变量 zsh美化终端 设zsh为默认shell 环境变量PATH 开启 ssh 远程连接 apt命令与问题 windows 和 wsl 互相访问文件 ...
- 【error】C++：fatal error LNK1169: 找到一个或多个多重定义的符号
编译时报错 : fatal error LNK1169: 找到一个或多个多重定义的符号 解答: 发生这种错误就是在一个项目定义了多个main函数的问题. *C++中一个项目即一个程序,多个文件只能有一 ...