依赖注入

依赖注入

在 Vue3 中，我们可以通过组合式 API 来实现依赖注入。组合式 API 是一种更灵活、更强大的编程范式，它允许我们在不修改组件逻辑的情况下，轻松地实现数据共享和状态管理。本文将通过代码案例详细的解释如何在 Vue3 中使用组合式 API 实现依赖注入，并针对不同的用法提出注意事项。

什么是依赖注入

首先，我们需要了解什么是依赖注入。依赖注入是一种设计模式，它将对象的依赖关系从对象内部转移到外部，使得对象更加独立和可测试。

Vue3 中使用 provide 和 inject 来实现依赖注入。

1. provide

provide 是一个用于向子组件提供数据的函数。当我们需要在多个组件之间共享数据时，可以使用 provide 函数。

例如，我们有一个全局的配置对象，我们希望在多个组件中使用这个配置对象。

import { createApp } from "vue";
import App from "./App.vue";

const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
};

const app = createApp(App);
app.provide("config", config);
app.mount("#app");

上面的例子创建了一个名为 config 的对象，并将其提供给了所有子组件。子组件可以通过 inject 函数来获取这个对象。

export default {
  setup() {
    const config = inject("config");
    console.log(config); // { apiUrl: 'https://api.example.com', timeout: 5000 }
  },
};

2. inject

inject 是一个用于从父组件接收数据的函数。当我们需要在子组件中访问父组件的数据时，可以使用 inject 函数。

例如，我们有一个名为 user 的数据，我们希望在子组件中访问这个数据。

export default {
  setup() {
    const user = inject("user");
    console.log(user);
  },
};

上面的例子中从父组件中获取了名为 user 的数据。

需要注意的是，如果 provide 函数没有被调用，那么 inject 函数将返回 undefined。

3. hasInjectionContext

如果 inject() 可以在错误的地方 (例如 setup() 之外) 被调用而不触发警告，则返回 true。此方法适用于希望在内部使用 inject() 而不向用户发出警告的库。

• 类型

function hasInjectionContext(): boolean;