vue provide/inject详解和用法

2019-12-30 16:48:41

参考地址 小菜鸟之Vue - provide/inject不归路

前言

为什么我要写这么一篇文章,网上不是一堆关于provide/inject的技术文章吗? 原因在于网上的那些博客大牛文章能完美避开坑,而我这篇文章描述是挖坑和埋坑的一个过程

provide/inject是什么

依赖注入,官网的描述并不能阻止我不写这个文章,原因很简单,官网只是老菜鸟的随手备忘录,小菜鸟还需要成长磨砺,它不能解决我一些问题。

何时使用

父子组件交互方式多种,props、vuex、emit、localStorage还有就是这个provide/inject了。它适合层级比较深的组件,比如子,子孙,子孙后代的组件有好几个用到父组件的某个属性,就可以用到这个provide/inject,它可以避免写大量繁琐的传值代码
我这里为什么要使用它? 我一个知识库详情父组件中包含了大量的子组件,每个子组件都需要父组件的知识库ID,这时候我不想写大量props,就用到provide/inject进行传值了

响应式传值最终版

急躁的改写这个代码结构就可以完成provide/inject响应传值

   data() {      return {
        knowledge: {
          knowledgeId: ''
        }
      }
    },
    provide() {      return {        // 直接传对象
        kData: this.knowledge
      }
    },
    created() {      // 变更data属性knowledge下的knowledgeId元素值
      this.knowledge.knowledgeId = 2
    }

子组件使用

    inject: ['kData'],
    mounted() {
      console.error('yc:' + this.kData.knowledgeId)
    }

坑在哪

坑在于provide,子组件inject没什么难度

  • 第一版尝试

下面代码并不能在子组件获取这个kId的值,但网上有provide: {}这样定义的写法,他们之所以能够成功是kId: 'xxx'后面定义的是一个静态的字符串而不是动态的获取data中的knowledgeId属性

    data() {      return {
        knowledgeId: 1
      }
    },
    provide: {
      kId: this.knowledgeId
    }
  • 第二版尝试

上面第一版的问题很好解决,网上有另外一种写法就是通过provide函数返回一个对象,这种是可以获取到data中的属性内容

    data() {      return {
        knowledgeId: 1
      }
    },
    provide() {      return {
        kId: this.knowledgeId
      }
    }
  • 第三版尝试

第二版看起来没问题,但是如果我要在某个地方改变这个data中的knowledgeId属性,子组件是获取不到的,怎么解决? https://www.jianshu.com/p/ae0...,这篇文章提到了:

提示:provide 和 inject
绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

虽然上面讲到了本质,老菜鸟都明白,小菜鸟茫然不解,所以它不能阻止我不写下这篇文章,原因在于它没有说起这个可监听对象是怎么个回事。传入的对象是指provide中的对象还是data的对象?第三版改写成在provide传入对象

   data() {      return {
        knowledgeId: ''
      }
    },
    provide() {      return {
        pData: {
          kId: this.knowledgeId
        }
      }
    },
    mounted() {      // 更改data中的knowledgeId的值
      this.knowledgeId = 2
    }
  • 第四版尝试

第三版的写法在子组件中是无法获取变更后的knowledgeId的内容,那么就在data中包装一个对象,但是还是不行,第五版改写马上开始

    data() {      return {
        knowledge: {
          knowledgeId: ''
        }
      }
    },
    provide() {      return {
        kId: this.knowledge.knowledgeId
      }
    },
    mounted() {      this.knowledge.knowledgeId = 2
    }
  • 第五版尝试

很高兴的说,这版就是终结版,它可以在子组件获取到knowledgeId了,原理是什么? 谁在乎呢,用别人的工具,用的开心就好

    data() {      return {
        knowledge: {
          knowledgeId: ''
        }
      }
    },
    provide() {      return {        // 直接传对象
        kData: this.knowledge
      }
    },
    mounted() {      this.knowledge.knowledgeId = 2
    }

存在的小问题

正如文章:https://www.jianshu.com/p/ae0... 第三点提到的,执行顺序的问题,上面在mounted中处理provide的数据有时会导致子组件获取到的是父属性knowledge.knowledgeId的默认属性'',所以把provide数据生成的处理逻辑放到created里面就可以避免这个问题的发生

题外话

上面变更knowledgId采用了从路由获取参数,但刷新页面导致参数丢失,这是因为路由是:
path: 'detail'而不是path: 'detail/:knowledgeId',虽然前者通过
this.$router.push({ name: 'knowledgeDetail', params: { knowledgeId: knowledgeId } }) 也能传,但刷新就参数丢失了,同时webstorm更改后时不时抽筋不立即更新页面,只能手动删除html样式来告诉IDE更新,这些无疑加大了对provide/inject刚才是出问题的排查难度,索性写下这篇文章指引那些用别人工具还用这么辛苦,写尼玛代码的人找到出路

    mounted() {
      this.knowledge.knowledgeId = this.$route.params.knowledgeId
    }


  • 2020-12-13 19:49:32

    Docker run命令详解

    命令格式:docker run [OPTIONS] IMAGE [COMMAND] [ARG...] Usage: Run a command in a new container 中文意思为:通过run命令创建一个新的容器(container)

  • 2020-12-13 20:15:43

    解决gitlab限制上传文件大小的问题

    服务端的限制有两个地方一个是gitlab本身,另外一个是gitlab使用的nginx。 gitlab本身也是很好解决的,使用管理员用户登录gitlab在设置Account and limit中加大Maximum attachment size (MB)和Maximum push size (MB)即可解决 nginx的话修改gitlab.rb这个文件中

  • 2020-12-14 15:06:50

    youtube-dl视频下载神器

    youtube-dl 是一款命令行下的视频下载工具,看着名称像是 YouTube 下载工具,其实这款工具不仅支持 YouTube ,还支持非常多的视频网站,比如优酷、爱奇艺、 bilibili 等,在写这篇日志的时候,暂时不支持腾讯视频。

  • 2020-12-15 20:06:43

    更多WebTorrent例子

    WebTorrent是第一个运行在浏览器的Torrent客户端。是的,没错。就是浏览器! 它完全是用JavaScript编写的,并使用WebRTC实现了真正的点对点传输。不需要浏览器插件、扩展或安装。 使用开放的Web标准,WebTorrent将网站用户连接在一起,形成一个分布式的、分散的Browser-to-browser网络,以实现高效的文件传输。

  • 2020-12-16 06:43:06

    WebRTC 实现Android点到点互连(含Demo)

    WebRTC被誉为是web长期开源开发的一个新启元,是近年来web开发的最重要创新。WebRTC允许Web开发者在其web应用中添加视频聊天或者点对点数据传输,不需要复杂的代码或者昂贵的配置。目前支持Chrome、Firefox和Opera,后续会支持更多的浏览器,它有能力达到数十亿的设备。

  • 2020-12-16 22:04:03

    基于本地代理的边下边播技术分析

    我们熟知的边下边播技术,是迅雷提供的,还有之前的快播、快车等工具,它们使用的技术基本上都是P2P下载技术。 P2P下载技术,本质上它并不是C-S的架构,P2P----> Peer to Peer,实际上它将各个客户端的资源调度起来,给上传资源种子,方便后续的下载者可以快速有效的下载资源,这种方式需要服务器整合各个Client,在有用户需要下载的情况下,服务器能及时调度资源,开始给下载者提供资源信息,保证下载者下载资源越快越好。P2P的下载方式后面我们专门介绍一下。这儿不继续展开了。