vuex的实现原理

vuex是利用了vue的mixin混入机制在beforeCreate钩子前混入vuexinit方法vueinit方法实现了store注入vue组件实例,并注册了vuex store的引用属性$store
state是借助vue的响应式data实现的,getters是借助vue中的computed特性实现的

原理:
首先实现一个受保护的state
通过new去初始化一个vue实例,利用vue中的响应式data,在data中定义一个$$state(加$$属性不会被代理)属性,值是要传递的state对象,然后通过访问器(get)的方式去访问state

实现单向数据流:
定义commit方法与dispatch方法,这两个方法都接收两个参数,type与payload,
获取到mutations与actions这两个选项,
分别对commit方法与dispatch方法传递type属性获取到函数并执行,
commit中的函数执行时要传递state和payload作为参数
dispatch中的函数在执行的时候需要传递store作为参数

getters实现:
getters的实现借助了vue中的computed特性,遍历getters中的所有key,并在computed中通过key声明一个无参函数,并返回一个带有state参数的函数(这个函数就是定义在getters中的函数),然后通过Object.defineProperty方法创建一个getters对象。只提供get方法。在get方法中返回计算属性computed的结果。

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值