深入vuex原理(上)

栏目: JavaScript · 发布时间: 5年前

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

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

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

准备

浅析vuex的构成

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

深入vuex原理(上)

浅析vuex的使用

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

深入vuex原理(上)

核心代码如下:

Vue.use(Vuex); // 1. vue的插件机制,安装vuex
let 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对store进行管理的同时,不禁会问:

  • vuex的store是如何注入到组件中的?
  • vuex的state 和 getter 是如何映射到 各个组件实例中自动更新的?

本篇章旨在解决以上疑问,让我们一起深入vuex的原理,揭开vuex的神秘面纱吧!

探秘原理

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

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

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

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

源码分析

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

Vue.mixin({ beforeCreate: vuexInit });
复制代码

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

this.$store = typeof options.store === 'function'
    ? options.store()
    : options.store
复制代码

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

深入vuex原理(上)

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ajax基础教程

Ajax基础教程

(美)阿斯利森、(美)舒塔、金灵 / 金灵 / 人民邮电出版社 / 2006-02-01 / 35.00元

Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和框架等。本书中所有例子的代码都可以从Apress网站本书主页的源代码(Sou......一起来看看 《Ajax基础教程》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具