微信号:QunarTL

介绍:Qunar技术沙龙是去哪儿网工程师小伙伴以及业界小伙伴们的学习交流平台.我们会分享Qunar和业界最前沿的热门技术趋势和话题;为中高端技术同学提供一个自由的技术交流和学习分享平台.

深入Vuex原理(上)

2019-01-22 09:30 孔维国


点击箭头处“蓝色字”,关注我们哦!!

孔维国,2016年加入去哪儿网技术团队。目前在大住宿事业部/增值业务研发中心,参与开发了TMC、CRM、QTA、Auth等项目,负责node框架nomi的设计以及开发。乐于探索布道新技术,在大前端的道路上越走越偏!在node领域上越陷越深!


前言

Vuex 作为 Vue 生态的重要组成部分,是对 store 进行管理的一柄利剑。简而言之,Vuex 是 Vue 的状态管理器。使用 Vuex 可用使数据流变得清晰、可追踪、可预测,更可以简单的实现类似时光穿梭等高级功能,对于复杂的大型应用来讲,Vuex 将变得尤为重要,对于 store 的切分、store 的 module 化、store 的变更、store 的追踪等等,store 的管理工作,使用 Vuex 管理 store 会大大提高项目的稳定性、扩展性。本篇将通过 Vuex 的源码对 Vuex 的设计以及实现原理进行剖析!


注:本篇文章只展示关键核心代码,一来由于篇幅原因,二来展示核心代码更容易让人理解。再者,本篇属于 Vuex 高级篇,对于本篇章中涉及的 Vue 相关的机制 以及 Vuex的高级使用等,不进行过多赘述,请自行前往官网查看。


准备

浅析Vuex的构成

Vuex 引入 State、Getter 的概念对状态进行定义;使用 Mutation 和 Action 对状态进行变更;引入 Module 对状态进行模块化分割;引入插件对状态进行快照、记录、以及追踪等;提供了 mapState、mapGetters、 mapActions、 mapMutations 辅助函数方便开发者在 vm 中处理 store。具体构成关系如下:

浅析Vuex的使用

Vuex 的使用方式很简单,具体使用细节请参见 Vuex 官网,本文为了剖析源码方便,只进行简单介绍。我们只需要利用 Vue 的 use 机制将 实例化后的 store 对象 注入 Vue 实例即可。如下图:

核心代码如下:

 
           
  1. Vue.use(Vuex); // 1. vue的插件机制,安装vuex

  2. let store = new Vuex.Store({ // 2.实例化store,调用install方法

  3.     state,

  4.     getters,

  5.     modules,

  6.     mutations,

  7.     actions,

  8.     plugins

  9. });

  10. new Vue({ // 3.注入store, 挂载vue实例

  11.    store,

  12.    render: h=>h(app)

  13. }).$mount('#app');  

对Vuex的疑问

我们在使用 Vuex 对 store 进行管理的同时,不禁会问: (1)Vuex 的 store 是如何注入到组件中的? (2)Vuex 的 state 和 getter 是如何映射到各个组件实例中自动更新的? 本篇章旨在解决以上疑问,让我们一起深入 Vuex 的原理,揭开 Vuex 的神秘面纱吧!

探秘原理

本部分将针对以上疑问,通过源码分析,剖析核心代码,对问题进行解答。

疑问:Vuex的store是如何注入到组件中的?

要解答这个问题,我们先从 Vuex 的使用表象上着手,从上面的介绍我们知道,使用 Vuex 之前我们要对 Vuex 进行安装。核心代码如下:

 
           
  1. Vue.use(Vuex); // vue的插件机制,安装vuex插件

源码分析

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

 
           
  1. Vue.mixin({ beforeCreate: vuexInit });

可见,store 注入 Vue 的实例组件的方式,是通过 Vue 的 mixin 机制,借助 Vue 组件的生命周期钩子 beforeCreate 完成的。即每个 Vue 组件实例化过程中,会在 beforeCreate 钩子前调用 vuexInit 方法。下面,我们将焦点聚焦在 vuexInit 函数。下面为 vuexInit 的核心代码:

 
           
  1. this.$store = typeof options.store === 'function'

  2.    ? options.store()

  3.    : options.store

该代码的核心问题是 this 的指向,得益于 mixin 机制,this 将指向 Vue 组件实例。最终,我们可以在 Vue 组件实例上获得 Vuex 的 store 对象的引用 $store。图示如下:

分析至此,我们已经得出该问题的答案。

结论

Vuex 利用了 Vue 的 mixin 机制,混合 beforeCreate 钩子,将 store 注入至 Vue 组件实例上,并注册了 Vuex store 的引用属性 $store。 对于其余问题的解答,请前往深入Vuex原理(下)。

 
Qunar技术沙龙 更多文章 AIOps 助力航信运维百万级交易系统 0 宕机 机器学习之scikit-learn开发入门(6) 机器学习之scikit-learn开发入门(7) 机器学习之scikit-learn开发入门(8) 2018 Qunar 心中有“数”
猜您喜欢 深度学习模型太大?这家公司直接跑在了树莓派上 Android逆向之旅---破解"穿靴子的猫"游戏的收费功能 PWA是否能带来新一轮大前端技术洗牌? 编程零基础,如何变身年薪百万的机器学习工程师? 春哥6天带你玩转React Native跨平台研发