【Vue】 的 【inject】 API 深入解析

Vue.js 是一个用于构建用户界面的渐进式框架。它提供了许多强大的特性，其中之一就是依赖注入机制。inject API 是 Vue 组合式 API 的一部分，允许我们在组件中注入依赖项，这在大型应用中尤其有用。

什么是依赖注入？

依赖注入（Dependency Injection, DI）是一种设计模式，用于实现组件之间的解耦。在 Vue 中，provide 和 inject 这两个 API 实现了依赖注入的功能。provide 允许在父组件中提供数据或功能，而 inject 允许子组件访问这些数据或功能。

provide 和 inject 的基本用法

provide

在父组件中使用 provide 来提供数据：

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide } from 'vue';

export default {
  setup() {
    const sharedState = reactive({ count: 0 });

    // 提供数据
    provide('sharedState', sharedState);

    return {};
  },
};
</script>

inject

在子组件中使用 inject 来获取数据：

<template>
  <div>
    <p>Count: {
   
   { sharedState.count }}</p>
    <button @click="sharedState.count++">Increment</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const sharedState = inject('sharedState');

    // 确保 sharedState 不为 null
    if (!sharedState) {
      throw new Error('sharedState is not provided!');
    }

    return { sharedState };
  },
};
</script>

完整示例

以下是一个完整的示例，展示了 provide 和 inject 的基本用法：

// ParentComponent.vue
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { provide, reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const sharedState = reactive({ count: 0 });

    provide('sharedState', sharedState);

    return {};
  },
};
</script>

// ChildComponent.vue
<template>
  <div>
    <p>Count: {
   
   { sharedState.count }}</p>
    <button @click="sharedState.count++">Increment</button>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const sharedState = inject('sharedState');
    if (!sharedState) {
      throw new Error('sharedState is not provided!');
    }
    return { sharedState };
  },
};
</script>

inject 的优势

1. 解耦合：通过 provide 和 inject，父组件可以提供数据，而子组件则可以选择性地注入这些数据。这使得组件之间的依赖关系更加清晰和可维护。

2. 避免 prop 链传递：在复杂的组件树中，使用 inject 可以避免层层传递 props 的麻烦。这在深层嵌套组件中尤为重要。

3. 动态依赖：可以在运行时动态地提供和注入依赖，使得组件更加灵活。

使用场景

1. 状态管理：在大型应用中，可以使用 provide 和 inject 来共享状态，例如用户信息、主题设置等。

2. 插件开发：在开发 Vue 插件时，可以通过 provide 提供一些全局功能，供其他组件使用。

3. 跨层级组件通信：当组件不在同一层级时，inject 可以简化通信。