小菜鸟之Vue - provide/inject不归路

前言

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

provide/inject是什么

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

什么时候使用

父子组件交互方式多种，props、vuex、$refs、$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
    }