vuex 深入Vuex原理（上）

孔卫国于2016年加入Qunar.com技术团队。目前在大住宿事业部/增值业务R&D中心参与了TMC、CRM、QTA、Auth等项目的开发，并负责节点框架nomi的设计开发。愿意探索新的布道技巧，越来越偏向大前端的道路！在节点领域越陷越深！

前言

作为Vue生态的重要组成部分，Vuex是经营店铺的利剑。简而言之，Vuex是Vue的国家经理。使用Vuex可以使数据流清晰、可追溯、可预测，简单实现时间旅行等高级功能。对于复杂的大规模应用，Vuex将变得尤为重要。用于商店细分、商店模块化、商店变更、商店跟踪等。，商店管理将大大提高项目的稳定性和可扩展性。本文将通过Vuex的源代码来分析Vuex的设计和实现原理！

注:本文仅显示关键核心代码。由于篇幅的原因，人们更容易理解核心代码。再者，本文属于Vuex的高级文章。关于VUEX的相关机制和本章涉及的Vuex的高级使用，请到官网查看。

准备分析Vuex的成分

Vuex引入了State和Getter的概念来定义状态；使用突变和操作来更改状态；引入模块模块化状态；引入插件进行快照，记录和跟踪状态；提供了MapState、mapGetters、mapActions和mapvariations辅助函数，以方便开发人员处理虚拟机中的存储。具体组成如下:

关于Vuex的使用

Vuex的用法很简单。具体使用细节请参考Vuex官网。为了方便分析源代码，本文只简单介绍一下。我们只需要使用Vue的使用机制，将实例化的store对象注入到Vue实例中。如下图:

核心代码如下:

Vue.use(Vuex); // 1. vue的插件机制，安装vuexlet store = new Vuex.Store({ // 2.实例化store，调用install方法state,getters,modules,mutations,actions,plugins});new Vue({ // 3.注入store, 挂载vue实例store,render: h=>h(app)}).$mount('#app');对Vuex的疑问

当我们用Vuex来管理店铺时，不禁会问:(1)Vuex的店铺是如何注入组件的？(2)2)Vuex的状态和getter是如何映射到每个组件实例进行自动更新的？本章旨在解决上述问题。让我们深入Vuex的原理，揭开Vuex的神秘面纱。

探索原则

在这一部分，我们将分析核心代码，并通过源代码分析来回答问题。

问题:Vuex的店铺是如何注入组件的？

要解决这个问题，要从使用Vuex的出现开始。从上面的介绍中，我们知道应该先安装Vuex再使用Vuex。核心代码如下:

Vue.use(Vuex); // vue的插件机制,安装vuex插件源码分析

上面的代码得益于Vue的插件机制，在调用Vuex的安装方法时会加载Vuex。因此，我们直接关注安装方法的实现，其核心代码如下:

Vue.mixin({ beforeCreate: vuexInit });

可以看出，将Vue的实例组件注入存储的方式是通过Vue的混合机制，借助Vue组件的生命周期钩子beforeCreate。也就是说，在每个Vue组件的实例化过程中，vuexInit方法将在beforeCreate钩子之前被调用。接下来，我们将重点介绍vuexInit函数。以下是vuexInit的核心代码:

this.$store = typeof options.store === 'function'? options.store(): options.store

这段代码的核心问题就是这个的指向。由于混合机制，这将指向Vue组件实例。最后，我们可以在Vue组件的实例上获得Vuex的store对象的引用$store。如下图: