vuex原理

vuex的工作原理_CH-EN.的博客-CSDN博客讨论vuex的工作原理那么必须先从vue的双向绑定开始vue的双向绑定vue的双向绑定主要做了两件事：1、数据劫持 2、添加观察者数据劫持的实现vue2.x通过 Object.defineProperty 递归可以实现通过Object.defineProperty劫持对象的get和set方法；在所代理的属性的get方法中，当dep.Target存在的时候，就会调用dep.depend()vue3.x通过proxy实现Proxy(data, { get(target,https://blog.csdn.net/xciyi/article/details/120904071

安装：

vuex里面的state为什么是响应式的？

暂时可以将他看作是data中的属性，也就是我们当前的状态。
state里面的这些属性都会被加入到响应式系统里面，而响应式系统会监听属性的变化，一旦属性发生变化，会通知所有用到这个属性的界面并进行刷新。
但有一个前提，所有的属性都必须先初始化好，如果直接在mutations里面添加一个新的属性，界面是不会显示的。

store是怎么注册的？

我们知道了vuex是利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性$store。

mutations，commit 是怎么实现的

函数首先通过 type 拿到对应的 mutation 对象数组， 然后把一个 mutation 的包装函数 push 到这个数组中，这个函数接收一个参数 payload，这个就是我们在定义 mutation 的时候接收的额外参数。这个函数执行的时候会调用 mutation 的回调函数

mutation是通过commit来触发的

根据 type 去查找对应的 mutation，如果找不到，则输出一条错误信息，否则遍历这个 type 对应的 mutation 对象数组，执行 handler(payload) 方法，这个方法就是之前定义的 wrappedMutationHandler(handler)，执行它就相当于执行了 registerMutation 注册的回调函数

辅助函数（mapState）

mapState在调用了 normalizeMap 函数后，把传入的 states 转换成由 {key, val} 对象构成的数组，接着调用 forEach 方法遍历这个数组，构造一个新的对象，这个新对象每个元素都返回一个新的函数 mappedState，函数对 val 的类型判断，如果 val 是一个函数，则直接调用这个 val 函数，把当前 store 上的 state 和 getters 作为参数，返回值作为 mappedState 的返回值；否则直接把 this.$store.state[val] 作为 mappedState 的返回值

  computed: mapState({
    name: state => state.name,
  })
  
  // 等同于
  
  computed: {
    name: this.$store.state.name
  }

Vuex的getters则是借助vue的计算属性computed实现数据实时监听