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的结果。