如何在 Vue.js 中使用反射？答案

【问题标题】：How to use reflection in Vue.js?如何在 Vue.js 中使用反射？
【发布时间】：2021-09-01 01:23:30
【问题描述】：

我有一个案例，我从信号器接收到一条消息，我试图根据我在消息中得到的名称实例化一个对象。

我在 angularjs 中遇到过类似的情况，我们使用具有 $injector.get("Name") 的 $injector 解决了它，它返回了我需要的对象。

【问题讨论】：

标签： javascript vue.js dependency-injection angularjs-injector

【解决方案1】：

Vue 没有提供可以帮助解决此问题的 DI 容器。基本上应该有一个将类或工厂函数链接到字符串标识符的映射：

const servicesMap = {
  Foo,
  Bar
};

...

if (!Object.keys(servicesMap).includes(name))
  throw ...

const Service = servicesMap[name];
const service = new Service();

考虑到服务可以从单个文件夹导入，这可以通过动态导入来完成：

const Service = require(`.../services/${name}`).default;
const service = new Service();

这取决于项目设置并自动禁用 services 的 treeshaking。

【讨论】：

好的，我得到了一些东西，但现在的问题是我应该如何首先定义“服务”。
Foo 等只是实例化的类。如果您不经常使用类，则将其限制为工厂函数，例如createFoo，这里是返回服务实例的工厂，所以应该是const createService = ...; const service = createService()。
首先我想展示我想要调用的内容。 export default class EditLocationSagaResponseHandler { constructor(){} handle(response) { var notification = { id: response.requestId, title: i18n('translations.location_operation_edit_title'), workerStatus: workerStatus.success, errors: response.errors }; store.addNotification(notification); } }
所以我尝试调用句柄方法。
我猜你的工厂可能看起来像createHandler = () => new EditLocationSagaResponseHandler()，然后你看起来像handlerFactories[name]().handle(...)。您可以缓存 handlerFactories[name]() 使其像在 Angular DI 中一样成为单例。