用依赖注入开启你的 Vue3 之旅：告别 provide/inject，拥抱 createContext

前端

2023-12-11 08:16:18

Vue3 中的依赖注入：深入探索 createContext

依赖注入的利器

依赖注入是一种优雅且强大的机制，用于在组件之间共享数据。Vue3 中的依赖注入不再依赖于 provide/inject，而是采用 createContext API，进一步提升了它的易用性和灵活性。

createContext：优雅简便的依赖注入

createContext 创建一个上下文对象，其中包含要共享的数据和功能。该对象通过父组件的 provide 属性传递给子组件，子组件可以使用 inject 方法访问上下文对象。

createContext 的优势

明确的依赖关系： createContext 明确定义了组件之间的依赖关系，避免了 provide/inject 的混乱和不透明。
控制访问： 您可以控制哪些组件可以访问上下文对象，从而增强了安全性。
更易维护： 明确的依赖关系使代码更容易理解和维护。

createContext 的应用场景

createContext 在以下场景中大显身手：

在组件之间共享数据
传递函数
共享状态

使用 createContext 的步骤

使用 createContext() 创建上下文对象。
通过父组件的 provide 属性传递上下文对象。
在子组件中使用 inject() 访问上下文对象。

代码示例

// 创建上下文对象
const userContext = createContext({
  currentUser: null
});

// 父组件提供上下文
<template>
  <div>
    <user-context-provider>
      <child-component />
    </user-context-provider>
  </div>
</template>
<script>
import userContext from './userContext';

export default {
  provide() {
    return {
      userContext
    };
  }
};
</script>

// 子组件注入上下文
<template>
  <div>
    {{ userContext.currentUser }}
  </div>
</template>
<script>
import { inject } from 'vue';
import userContext from './userContext';

export default {
  setup() {
    const userContext = inject(userContext);
    return {
      userContext
    };
  }
};
</script>