用Provide和Inject做Vue3插件的方法是什么
这篇文章主要介绍“用Provide和Inject做Vue3插件的方法是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“用Provide和Inject做Vue3插件的方法是什么”文章能帮助大家解决问题。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：国际域名空间、雅安服务器托管、营销软件、网站建设、五指山网站维护、网站推广。
为什么 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 的支持。
关于“用Provide和Inject做Vue3插件的方法是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
网站名称：用Provide和Inject做Vue3插件的方法是什么
本文路径：http://cdiso.cn/article/gjpeej.html
