温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue3插件中怎么使用Provide和Inject

发布时间:2022-11-17 09:14:58 来源:亿速云 阅读:151 作者:iii 栏目:开发技术

今天小编给大家分享一下Vue3插件中怎么使用Provide和Inject的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

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

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

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

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

在 Composition API 中,只能在 setup() 方法期间调用这两种方法。

什么是 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() {     // 第二个可选参数是默认值(如果不存在)     const isLoggedIn = inject(LoggedInSymbol, false)     return {       isLoggedIn     }   } }

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

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

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

main.jsimport { createApp } from 'vue' import App from './App.vue'   const app = createApp(App)  const ThemeSymbol = Symbol() app.provide(ThemeSymbol, 'dark')   app.mount('#app')

可以用 ref 提供响应式数据

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

// 生产者r (父组件) const LoggedInSymbol = Symbol() const loggedIn = ref('true') provide(LoggedInSymbol, loggedIn)  // 消费者 (子组件) const theme = inject(LoggedInSymbol, ref('false'))

怎样在插件中使用 provide 和 inject

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

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

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

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

Plugin.jsconst 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 }

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

// 在组件根目录提供 store // const App = {   setup() {     provideStore(store)   } }  const Child = {   setup() {     const store = useStore()     // use the store   } }

根据上述代码,在某些根组件中,我们提供了插件,并向其传递了组件函数。然后无论想在哪里使用都必须将其注入到我们的组件中。

组件永远不必真正进行 provide/inject 调用,而只需调用插件公开的 provideStore/useStore 方法即可。

还能用旧的插件吗

简单的来说是:能。如果多说点,那就是取决于你自己的想法。

可以继续使用 Options API,并且对 this 的引用方式与以前相同,并且所有旧插件的工作方式都不变。

但是迁移到 Vue3 并利用其所有功能觉得是值得的。

只要你想用 Vue2 的 Options API,你的插件就可以正常工作。但是,很多维护良好的插件或库都应该添加对 Vue3 的支持。

以上就是“Vue3插件中怎么使用Provide和Inject”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI