关于将Vuex注入Vue生命周期的过程

本文是前端词典系列的第13篇文章。我将在接下来的九篇文章中重点介绍Vue。希望这九篇文章能帮助你加深对Vue的理解。当然，这些文章的前提是默认你对Vue有一定的基础。如果完全没有基础，建议先看官方文件。

在第一篇文章中，我将结合Vue和Vuex的一些源代码来解释将Vuex注入Vue生命周期的过程。

说到源代码，并没有想象中那么难。它类似于我们通常编写的业务代码，只是方法的调用。但是源代码的调用树会复杂得多。

为什么要用Vuex

使用Vue，我们将不可避免地遇到组件之间共享的数据或状态。随着应用的业务代码越来越复杂，道具、事件、事件总线等通信方式的弊端会越来越明显。这就是我们需要Vuex的时候。Vuex是专门为Vue设计的状态管理工具。

状态管理是Vue组件解耦的重要手段。

它借鉴了Flux和redux的基本思想，将状态从整体中抽离出来，形成一个Store。

Vuex不会限制您的代码结构，但它需要遵循一些规则：

应用程序级别的状态应该集中在一个存储对象中。提交变异是改变状态的唯一途径，这个过程是同步的。异步逻辑应该封装在动作中。Vuex注入Vue生命周期。

安装插件的时候，我们总是用Vue.use()来加载插件，如下，但是Vue.use()做了什么呢？

从“Vue”导入Vue；从“Vuex”导入Vuex；vue . use(Vuex)；Vue.use()做了什么

安装Vue.js插件。如果插件是一个对象，您必须提供安装方法。如果插件是一个函数，它将被用作安装方法。调用install方法时，Vue作为参数传入。

以上是官方文件的解释。

接下来，让我们看看Vue.use()从源代码部分做了什么。

Vue源代码调用initGlobalAPI入口方法中的initUse (Vue)方法，该方法定义了Vue.use()需要做什么。

函数initGlobalAPI(Vue){ 0.init use(Vue)；initMixin $ 1(Vue)；//在下文中，Vue.mixin将提到.} function init use(vue){ vue . use=function(plugin){ var installed plugins=(this。_已安装的插件| |(这。_已安装的插件=[]))；/*已判断此插件是否已安装*/if(已安装插件。index of(plugin)-1){ return this } varargs=to array(arguments，1)；args . unshift(this)；/*判断插件是否有安装方法*/if(plugin . install==' function '){ plugin . install . apply(plugin，args)；} else if(plugin==' function '){ plugin . apply(null，args)；} installedPlugins.push(插件)；返回此}；}这段代码主要做两件事：

一是防止重复安装同一个插件，二是初始化插件插件的安装方法

看完上面的源代码，我们知道插件(Vuex)需要提供一个安装方法。然后让我们看看Vuex源代码中是否有这个方法。结果当然是：

/*安装方法暴露在外*/函数install (_Vue) {/*避免重复安装(Vue.use还会检测同一插件是否重复安装一次)*/if (vue _ vue==vue) {{console。错误('[vuex]]已经安装。Vue.use(Vuex)应该只调用一次。);} return } Vue=_ Vue/*将vue xit混淆为vue */apply mixin (vue)的beforeCreate(Vue2.0)或_init方法(vue 1.0)；}这段代码主要做两件事：

一是防止Vuex被重复安装，二是执行applyMixin，目的是执行vue xit方法初始化Vuex。接下来，我们来看看applyMixin(Vue)的源代码：

/*在创建之前将vue xit与vue混淆*/函数应用mixin(vue){ var version=number(vue。version.split(' . ') [0]);if(版本=2){ vue . mixin({ before create : vue xit })；} vue 1.0的else {/*处理逻辑，*/.}函数vue xit(){ 0.}}从上面的源代码可以看出，Vue.mixin方法将vue xit方法混淆为beforeCreate钩子，也正因为这个操作，每个vm实例都会调用vue xit方法。那么vuexInit做了什么呢？

vuexInit()

当我们使用Vuex时，我们需要将存储传递给Vue实例。

new Vue({ el: '#app '，store })；但是我们可以访问每个虚拟机中的存储，因此我们需要依赖vuexInit。

function vue xit(){ const options=this。当stroe存在于根节点*/this中时，$ options if (options.store) {/*。$ store=选项类型，store==' function '？options . store(): options . store } else if(options . parent options . parent . $store){/*子组件直接从父组件获取$ store。这确保了所有组件共享同一个全局存储*/this。$store=options。父母。$ store}}当stroe存在于根节点时，options.store会直接分配给该节点。$商店。否则，这意味着它不是根节点，并且是从父节点的$store获取的。

通过这个操作，我们可以通过这个访问Store的实例。$存储在任何虚拟机中。接下来，我们转向Vue.mixin()。

Vue.mixin()

混合的全局注册会影响注册后创建的每个Vue实例。插件作者可以通过混合将自定义行为注入组件。不建议在应用程序代码中使用。

在Vue的initGlobalAPI入口方法中调用了initMixin$1(Vue)方法：

function initMixin $ 1(Vue){ Vue . mixin=function(mixin){ this . options=merge options(this . options，mixin)；返回此}；}将Vuex注入vue生命周期的过程大概是这样的。如果有兴趣，可以直接看Vuex的源代码。接下来，我们来谈谈Store。

商店

正如我们上面提到的，vuexInit将从选项中获得商店。那么我们就来说说这家店是怎么产生的。

当我们使用Vuex时，我们将定义一个类似如下的Store实例。

从“vue”导入Vue从“vuex”导入Vuex从“导入突变”。/ventures ' vue . use(Vuex)const state={ showstate : 0，} export default new Vuex . store({ strict : true，state，getters，})在发布环境中不启用严格模式。严格模式将深入监控状态树，以检测不合规的状态变化。请确保在发布环境中关闭严格模式，以避免性能损失。

国家的反应

你在乎国家如何回应吗？这主要是通过在store的构造函数中调用resetStorevm (this，state)方法来实现的。

这个方法主要重置一个private _ VM(Vue的一个实例)对象。_vm对象将保留我们的状态树，并通过计算属性来存储存储的getters。现在让我们具体看看它的实现过程。

/* 使用某视频剪辑软件内部的响应式注册状态*/函数resetStoreVM(存储，状态，热){ /*存放之前的伏特计对象*/const oldVm=store ._虚拟机存储。getter={ } const wrapppedgetter=store ._ wrappedgesters const computed={ }/*通过Object.defineProperty方法为store.getters定义了得到方法。当在组件中调用这个$商店。吸气器。XXX这个方法的时候，会访问商店. VM _ XXX[XXX]*/forEachValue(wrappedgeters，(fn，key)={ computed[key]=partial(fn，store)对象。定义属性(存储。getter s，key，{ gett :()=store ._vm[key]，可枚举： true//for local getter })})const silent=vue。配置。无声/*设置沉默的为真实的的目的是为了取消_vm的所有日志和警告*/Vue.config.silent=true /*这里新的了一个某视频剪辑软件对象，运用某视频剪辑软件内部的响应式实现注册状态以及计算*/存储. VM _ new=Vue({ data : { $ $ state : state }，computed })Vue。配置。无声=无声/*使能严格模式，Vuex中对状态的修改只能在变化的回调函数里*/if(商店。严格){启用严格模式(存储)} if(oldVm){/*解除旧伏特计的状态的引用，并销毁这个旧的_vm对象*/if (hot) { store ._withCommit(()={ oldVm ._数据$ $ state=null })} vue。nexttick(()=oldVm .$ destroy())} }状态的响应式大概就是这样实现的，也就是初始化resetStoreVM方法的过程。

看看商店的犯罪方法

我们知道犯罪方法是用来触发变化的。

提交(_type，_payload，_options) { /* unifyObjectStyle方法校参*/const { type，payload，options }=unifyObjectStyle(_ type，_payload，_options) const突变={类型，有效载荷} /*找到相应的变化方法*/const条目=这个._突变[类型] if(！条目){ if (process.env.NODE_ENV！==' production '){控制台。错误(`[vuex]未知突变类型： ${type}`) } return } /*执行变化中的方法*/这个. withCommit(()={ entry.forEach(函数commitIterator(处理程序){ handler(有效负载)}) }) /*通知所有订阅者，传入当前的变化对象和当前的陈述*/这个_subscribers.forEach(sub=sub(突变，这个。state))if(process。ENV。node _ ENV！==“生产”选项选项。无声){控制台。warn(`[vuex]突变类型： ${type} .静默选项已被删除。`'使用vue-devtools中的过滤器功能')} }该方法先进行参数风格校验，然后利用_withCommit方法执行本次批量触发变化处理函数。执行完成后，通知所有_订户（订阅函数)本次操作的变化对象以及当前的状态状态。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。