Skip to content

Provide/Inject

Zova 推荐使用ioc: 层级注入来代替 Vue3 的依赖注入机制。当然,Zova 也支持 Vue3 的依赖注入机制,从而兼容现有 Vue3 生态

在 Zova 中实现 Vue3 的依赖注入,主要分三步:

1. 定义类型

采用接口合并的机制,定义 key 与 type 的映射关系。为了确保全局唯一性,key 采用module:name的格式,从而避免命名冲突

typescript
// in module: test-module1
import 'zova';
declare module 'zova' {
  export interface IInjectRecord {
    'test-module1:fruit': String;
  }
}

2. Provide

在父组件中提供值

typescript
// in module: test-module1
class Parent {
  protected async __init__() {
    this.bean.provide('test-module1:fruit', 'apple');
  }
}
  • this.bean 是当前组件实例的 ioc 容器

3. Inject

在子组件中注入值

typescript
// in module: test-module2
import 'zova-module-test-module1';

class Child {
  protected async __init__() {
    const fruit = this.bean.inject('test-module1:fruit');
    const fruit2 = this.bean.inject('test-module1:fruit', 'pear');
  }
}
  • this.bean 是当前组件实例的 ioc 容器

为何不直接使用Vue3提供的provide/inject方法?

Vue3 的 provide/inject 方法只能在 setup 的同步阶段调用。而 Zova 通过 ioc 容器封装的 provide/inject 方法则没有这个限制,可以在任何地方的异步方法中调用

基于 MIT 许可发布