文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

用 Provide 和 Inject 设计Vue3插件

2024-12-03 04:49

关注

尽管不常用,但是你可以仅使用两种内置方法来实现依赖项注入:provide和inject。

通过查看 Composition API 文档会发现,在 Vue 3.0 中,使用 Provide 和 Inject 进行依赖项注入更为常见。这主要是因为 Composition API 对 this 引用的更改,插件必须切换为这种模式才行。

在本文中,我们将研究在 Vue3 中使用 Provide 和 Inject,以及如何将其用于构建 VueJS 插件。

[[401939]]

为什么 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 检索这个值。

下面是一个例子:

  1. import { provide, inject } from 'vue' 
  2.  
  3. const LoggedInSymbol = Symbol() 
  4.  
  5. const ParentComponent = { 
  6.   setup() { 
  7.     provide(LoggedInSymbol, true) 
  8.   } 
  9.  
  10. const DeepDescendent = { 
  11.   setup() { 
  12.     // 第二个可选参数是默认值(如果不存在) 
  13.     const isLoggedIn = inject(LoggedInSymbol, false) 
  14.     return { 
  15.       isLoggedIn 
  16.     } 
  17.   } 

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

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

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

  1. main.jsimport { createApp } from 'vue' 
  2. import App from './App.vue' 
  3.  
  4.  
  5. const app = createApp(App) 
  6.  
  7. const ThemeSymbol = Symbol() 
  8. app.provide(ThemeSymbol, 'dark') 
  9.  
  10.  
  11. app.mount('#app') 

可以用 ref 提供响应式数据

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

  1. // 生产者r (父组件) 
  2. const LoggedInSymbol = Symbol() 
  3. const loggedIn = ref('true') 
  4. provide(LoggedInSymbol, loggedIn) 
  5.  
  6. // 消费者 (子组件) 
  7. const theme = inject(LoggedInSymbol, ref('false')) 

怎样在插件中使用 provide 和 inject

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

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

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

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

  1. Plugin.jsconst StoreSymbol = Symbol() 
  2.  
  3. export function provideStore(store) { 
  4.   provide(StoreSymbol, store) 
  5.  
  6. export function useStore() { 
  7.   const store = inject(StoreSymbol) 
  8.   if (!store) { 
  9.     // throw error, no store provided 
  10.   } 
  11.   return store 

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

  1. // 在组件根目录提供 store 
  2. // 
  3. const App = { 
  4.   setup() { 
  5.     provideStore(store) 
  6.   } 
  7.  
  8. const Child = { 
  9.   setup() { 
  10.     const store = useStore() 
  11.     // use the store 
  12.   } 

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

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

还能用旧的插件吗

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

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

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

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

总结

正确使用 provide/inject 绝对能够提高你对 Vue 的驾驭能力。

尽管很多应用并不会使用这些概念,但是如果你认真开发插件,则 Vue3 的 Composition API 意味着你必须使用provide 和 inject。

来源:前端先锋内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯