使用provide和inject的Vue依赖项注入非常适合构建Vue3插件或避免prop多层传递。
尽管不经常使用它，但是您可以仅使用两个内置方法来实现依赖项注入：provide和inject。
查看Composition API文档，在Vue 3.0中，使用Provide和Inject进行依赖项注入将更为常见。这主要是因为由于Composition API对this引用的更改，插件将不得不切换为使用此模式。
在本文中，我们将研究在Vue3中使用Provide和Inject以及如何将其用于构建VueJS插件。
为什么Vue3插件的工作方式有所不同？
在Vue2中，大多数插件会将属性注入this。例如，通过访问Vue路由器this.$router。
但是，该setup()方法不再包含对的相同引用this。进行此更改的主要原因是增加了对Typescript的支持。
Sooo，“我们现在要如何访问我们的插件？”
幸运的是，我们可以使用provide并inject帮助在我们的Vue应用程序中注入依赖项。
Provide / inject用于依赖项注入–使我们能够在Vue应用程序的根目录中提供一个插件，然后将其注入子组件中。
在Composition API中，只能在setup（）方法期间调用这两种方法。
什么是provide / inject？
好的-我们知道我们必须使用provide和inject，但是那怎么工作呢？
基本上，我们只需要某种键来识别我们的依赖关系–出于我们的目的，我们将使用Javascript Symbol。
然后，我们的provide方法会将我们的Symbol与某个值相关联，而我们的inject方法将使用相同的Symbol检索该值。
看一个例子更有意义。
import { provide, inject } from 'vue'
const LoggedInSymbol = Symbol()
const ParentComponent = {
setup() {
provide(LoggedInSymbol, true)
}
}
const DeepDescendent = {
setup() {
// second optional param is a default value if it doesn't exist
const isLoggedIn = inject(LoggedInSymbol, false)
return {
isLoggedIn
}
}
}
通过这种模式，实际上Vue3可以完成一些很酷的技巧。
我们可以在我们的应用程序中全局提供依赖项
如果我们想在全球范围内提供某些东西，则可以app.provide在声明Vue应用程序实例的任何地方使用。然后，我们可以像以前一样注入。
main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
const ThemeSymbol = Symbol()
app.provide(ThemeSymbol, 'dark')
app.mount('#app')
我们可以使用ref提供反应数据
如果我们希望将反应性数据传递给子组件，这也非常方便。我们要做的就是使用传递给我们的提供方法一个反应性ref()。
// in provider (parent)
const LoggedInSymbol = Symbol()
const loggedIn = ref('true')
provide(LoggedInSymbol, loggedIn)
// in consumer (descendant)
const theme = inject(LoggedInSymbol, ref('false'))
我们如何使用provide / inject？
设计插件实际上与我们刚才看到的简单的provide / inject示例非常相似。
但是，我们不想使用单个值，而是要使用合成函数。这是Vue3的巨大优势之一-能够根据功能组织和提取代码。
由于我们的代码无论如何都应该用有组织的组合函数编写，因此我们只需要创建这些provide / inject方法以及BAM-我们就有了一个插件。
让我们快速看一下Vue3 Composition API文档提供的假设插件。
Plugin.js
const StoreSymbol = Symbol()
export function provideStore(store) {
provide(StoreSymbol, store)
}
export function useStore() {
const store = inject(StoreSymbol)
if (!store) {
// throw error, no store provided
}
return store
}
然后，我们的实际组件将像这样使用它。
// provide store at component root
//
const App = {
setup() {
provideStore(store)
}
}
const Child = {
setup() {
const store = useStore()
// use the store
}
}
如您所见，在某些根组件中，我们提供了插件，并向其传递了composition函数。然后，无论我们想在哪里使用它，都必须将其注入到我们的组件中。
组件永远不必真正进行provide / inject调用，而只需调用插件公开的provideStore / useStore方法。
所以我仍然可以使用旧的插件吗？
简短的答案？ 是的。
长答案？ 取决于你的意思。
由于Composition API纯粹是可加性的，因此您可以继续使用Options API，并具有与this以前相同的引用，并且所有旧插件都将工作相同。
但是，继续前进，绝对值得过渡到Vue3并利用其所有功能。
本质上，只要您想坚持使用Vue2 Options API，您的插件就可以正常工作。但是，无论如何，大多数维护良好的插件/库都应该添加对Vue3的支持。
结论
正确使用Provide / Inject绝对是 Vue开发中更高级的主题。
尽管大多数典型的应用程序不会使用这些概念，但是如果您对开发插件很认真，则Vue3 Composition API中的更改意味着您必须 使用provide / inject。
如果您想了解更多信息，请务必查看Composition API文档。
网友评论