看起来，使用 provide/inject 做全局状态管理好像很危险，那么有没有 provide/inject 更好的使用方式呢？当然有，那就是使用 provide/inject 编写组件。
使用 provide/inject 编写组件
使用 provide/inject 做组件开发，是 Vue 官方文档中提倡的一种做法。
以我比较熟悉的 elementUI 来举例：
在 elementUI 中有 Button（按钮）组件，当在 Form（表单）组件中使用时，它的尺寸会同时受到外层的 FormItem 组件以及更外层的 Form 组件中的 size 属性的影响。
如果是常规方案，我们可以通过 props 从 Form 开始，一层层往下传递属性值。看起来只需要传递传递两层即可，还可以接受。但是，Form 的下一层组件不一定是 FormItem，FormItem 的下一层组件不一定是 Button，它们之间还可以嵌套其他组件，也就是说，层级关系不确定。如果使用 props，我们写的组件会出现强耦合的情况。
provide/inject 可以完美的解决这个问题，只需要向后代注入组件本身（上下文），后代组件中可以无视层级任意访问祖先组件中的状态。
部分源码如下：
// Button 组件核心源码 export default { name: 'ElButton', // 通过 inject 获取 elForm 以及 elFormItem 这两个组件 inject: { elForm: { default: '' }, elFormItem: { default: '' } }, // ... computed: { _elFormItemSize() { return (this.elFormItem || {}).elFormItemSize; }, buttonSize() { return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size; }, //... }, // ... };
总结
其实在 Vue 的学习中，遵循着二八法则，我们常用的 20% 的 API 就能解决大部分日常问题，剩余的 API 感觉用处不大。但是，抽点时间去了解那些冷门的 API，也许你能发现一些不一般的风景，令你在解决一些问题时，事半功倍。