Vue3插件中怎么使用Provide和Inject.docxVIP

第

Vue3插件中怎么使用Provide和Inject

为什么Vue3插件的工作方式与以往不同

在Vue2中，大多数插件将属性注入到this上。例如可以通过this.$router访问Vue路由器。

但是，setup()方法不再包含对this的相同引用。进行这种更改的主要原因是增加了对Typescript的支持。

那么在Vue3中该如何访问我们的插件呢可以用provide和inject来帮助我们在Vue程序中注入依赖项。Provide/inject用于依赖项注入，可以使我们能在Vue程序的根目录中提供插件，并且然后将其注入子组件中。

在CompositionAPI中，只能在setup()方法期间调用这两种方法。

什么是provide和inject

我们需要某种键来识别依赖关系，JavaScript的Symbol可以复合这种要求。

然后provide方法会将我们的Symbol与某个值相关联，而inject方法会用相同的Symbol检索这个值。

下面是一个例子：

import{provide,inject}fromvueconstLoggedInSymbol=Symbol()constParentComponent={setup(){provide(LoggedInSymbol,true)}}constDeepDescendent={setup(){//第二个可选参数是默认值（如果不存在）constisLoggedIn=inject(LoggedInSymbol,false)return{isLoggedIn}}}

Vue3通过这种模式可以实现一些很实用的技巧。

可以在程序中全局提供依赖项

如果我们想在全局作用域中提供一些东西，可以在声明我们的VUE实例的时候下用app.provide。然后可以用相同的方式进行注入。

mAIn.jsimport{createApp}fromvueimportAppfrom./App.vueconstapp=createApp(App)constThemeSymbol=Symbol()app.provide(ThemeSymbol,dark)app.mount(#app)

可以用ref提供响应式数据

如果我们希望将响应式数据传递给子组件，这也非常方便。只需要用ref()传递我们方法的一个响应式的属性。

//生产者r(父组件)constLoggedInSymbol=Symbol()constloggedIn=ref(true)provide(LoggedInSymbol,loggedIn)//消费者(子组件)consttheme=inject(LoggedInSymbol,ref(false))

怎样在插件中使用provide和inject

实际上设计插件与我们刚才看到的简单例子非常相似。

但是我们不想使用单个值，而是要使用组合函数。这是Vue3的一个巨大优势mdash;mdash;能够根据函数组织和提取代码。

由于我们的代码无论如何都应该用有组织的组合函数编写，所以只需要创建这些provide和inject方法就能够写出一个插件。

先简单的看一下Vue3CompositionAPI文档中提供的插件例子。

Plugin.jsconstStoreSymbol=Symbol()exportfunctionprovideStore(store){provide(StoreSymbol,store)}exportfunctionuseStore(){conststore=inject(StoreSymbol)if(!store){//throwerror,nostoreprovided}returnstore}

在实际的组件中会这样使用：

//在组件根目录提供store//constApp={setup(){provideStore(store)}}constChild={setup(){conststore=useStore()//usethestore}}

根据上述代码，在某些根组件中，我们提供了插件，并向其传递了组件函数。然后无论想在哪里使