淄博网站制作设计网站转换小程序

1，简单总结

Vuex就是一个构造函数，他拥有install方法和Store类这两个属性。在vue初始化调用new Vue的时候，将store作为参数传入，然后调用Vue.use()实际是调用install方法将store这个实例挂载到全局，从而可以保证全局只有一个唯一的store对象。

Store这个类拥有commit和dispatch这些方法，同时将用户传入的state包装成data，从而在vew Vue()的过程中实现了响应式。

2，install方法

install方法是借助vue的beforeCreate钩子函数执行，因为此时$options还没有初始化好，他的核心逻辑就是将$options.store赋值到全局$store，且最终将插件添加到installedPlugins中，保证相同的插件不会被重复注册。

3，state实现

vuex中的state值就是Store的一个属性，可以直接从$store对象中获取。同时由于在vue初始化时，data中的数据是响应式的，因此实现的过程将options.state赋值给了data，实现了响应式。

4，getter实现

用户传入的getter存储到getters数组中，也是利用Object.defineProperty的get接口，同时借助了computed计算属性实现实时监听。

5，mutation实现

与getter的实现类似，也是将用户传入的mutation存入mutations数组，触发mutation要调用的commit方法实际是访问数组中的某个mutation而触发的调用（eg：this.mutations[method](arg)）

6，action实现

action的实现与mutation几乎雷同，只是action的dispatch触发，是定义的异步箭头函数（this.actions[type](payload)）。

详细总结参考手写Vuex核心原理