深入理解vuex

在dom层面有两个vue实例,第一个实例切换id为root的div,同时创建了一个data,data的值为message在这里插入图片描述
第三个vue实例将会替换root3,在第三个vue实例中包含button,这个按钮调用后会触发change事件,改变vuex中的状态,然后会同时改变data和data2的值,点击后会加一个“.”
两个是不同的实例,在日常的开发中通常只会用到一个vue实例。

在这里插入图片描述
首先我们使用vue.use加载一个插件
在这里插入图片描述
在这个function中我们定义了一个vuex对象,这个vuex{}用来模拟vue全家桶的vuex,我们统一叫他vuex,本质上也是个对象,它包含了_vm实例,实例里面data有个message,这个_vm没有绑定任何的dom,就是一个纯粹的vue实例,它其实就是状态管理的核心。
我们vuex创建了一个state对象,这个对象指向了_vm,所以这里的state就是vue对象。
在vuex中,通过mutations来更新state,(一句废话)
在mutations中,我们通过setmessage传入一个value,如果把value传入,name会更新vuex下面的_vm下面的message。
全局的mixin会对所有的vue里面的实例都调用这个方法在beforecreated中,他就会确保在每个vue实例下都会有一个beforecreated。

在这里插入图片描述
beforecreated的作用是在当前的vue实例下面挂在了一个 $store属性,这个 $store指向vuex。
在vuex中使用this. $store来访问vuex数据就是这样的原理,找到_vm,绑定message
vuex的原理关键:使用vue实例管理状态

所有的依赖都放在vue源码中Dep对象()里面管理,当Dep里面的依赖发生变化时,Dep会通知所有的wacthcer进行更新,每一个vue实例都对应一个whatcher,这些whatcher也会放到Dep里面管理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值