Vue3 与依赖注入

本文写于 2021 年 2 月 19 日

在 React 中,我们可以通过 context 与 useContext 实现单例、注入……等诸多特性。

详细请看上一篇文章:如何利用 React Hooks 管理全局状态.

例如:

const SomeService = createContext(null);

const useRootSomeService = () => {
const [n, setN] = useState(0); const add = useCallback(() => {
setN((number) => number + 1);
}, []); return { n, setN };
}; const App: React.FC = () => {
return (
<SomeService.Provider value={useRootSomeService()}>
<Apple />
</SomeService>
)
}; const Apple: React.FC = () => {
const someService = useContext(SomeService)
};

那么 Vue3 可以吗?

可以!!!只需要利用 Vue3 的 provide 与 inject API 即。

创建一个 Service

import { Ref, ref } from "vue";

class ChatService {
static INJECT_KEY: string; conversations: Ref<Conversation[]>; constructor() {
this.conversations = ref([]);
}
}

这样我们只需要在组件中实例化该 class,就可以拥有响应性的 conversations 属性了。

但是我们不满足于如此,我们还想要在任何地方,都可以使用 const chatService = inject(ChatService); 来拿到服务的单例!

provide/inject

vue3 提供给我们的 provide API 可以在任意组件中使用:provide(key, variable);

使用后该组件的自组件的任何位置都可以利用 inject API 拿到刚刚注入的变量:const v = inject(key);

因此我们可以这么封装一下:

import { provide as vueProvide, inject as vueInject } from "vue";

export const createInjectKey = () => {
const randomNumber = Math.round(Math.random() * 10 ** 8).toString();
return randomKey;
}; interface ServiceType<T> {
new (): T;
INJECT_KEY: string;
} export function provide<T>(Service: ServiceType<T>) {
const key = createInjectKey();
Service.INJECT_KEY = key;
vueProvide(key, new Service());
} export function inject<T>(Service: ServiceType<T>): T {
const service = vueInject<T>(Service.INJECT_KEY);
if (!service) {
console.error("You have to provide service first!!!");
}
return service!;
}

这样一来,我们只需要写一个拥有 static INJECT_KEY 属性的 class,就可以在组件树顶端使用 provide(xxxService),然后再在任意位置调用 inject(xxxService) 来获取服务单例了!

(完)

Vue3 与依赖注入的更多相关文章

  1. 【17MKH】我在框架中对.Net依赖注入的扩展

    说明 依赖注入(DI)是控制反转(IoC)的一种技术实现,它应该算是.Net中最核心,也是最基本的一个功能.但是官方只是实现了基本的功能和扩展方法,而我呢,在自己的框架 https://github. ...

  2. webapi - 使用依赖注入

    本篇将要和大家分享的是webapi中如何使用依赖注入,依赖注入这个东西在接口中常用,实际工作中也用的比较频繁,因此这里分享两种在api中依赖注入的方式Ninject和Unity:由于快过年这段时间打算 ...

  3. ASP.NET Core 中文文档 第四章 MVC(3.8)视图中的依赖注入

    原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用 依赖 ...

  4. 在WPF中使用依赖注入的方式创建视图

    在WPF中使用依赖注入的方式创建视图 0x00 问题的产生 互联网时代桌面开发真是越来越少了,很多应用都转到了浏览器端和移动智能终端,相应的软件开发上的新技术应用到桌面开发的文章也很少.我之前主要做W ...

  5. MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息

    MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...

  6. .Net Core MVC 网站开发(Ninesky) 2.3、项目架构调整-控制反转和依赖注入的使用

    再次调整项目架构是因为和群友dezhou的一次聊天,我原来的想法是项目尽量做简单点别搞太复杂了,仅使用了DbContext的注入,其他的也没有写接口耦合度很高.和dezhou聊过之后我仔细考虑了一下, ...

  7. ASP.NET Core中如影随形的”依赖注入”[下]: 历数依赖注入的N种玩法

    在对ASP.NET Core管道中关于依赖注入的两个核心对象(ServiceCollection和ServiceProvider)有了足够的认识之后,我们将关注的目光转移到编程层面.在ASP.NET ...

  8. ASP.NET Core中如影随形的”依赖注入”[上]: 从两个不同的ServiceProvider说起

    我们一致在说 ASP.NET Core广泛地使用到了依赖注入,通过前面两个系列的介绍,相信读者朋友已经体会到了这一点.由于前面两章已经涵盖了依赖注入在管道构建过程中以及管道在处理请求过程的应用,但是内 ...

  9. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

随机推荐

  1. resin服务之三---独立resin的配置

    独立resin的配置 关掉httpd服务: [root@data-1-1 ~]# killall httpd [root@data-1-1 ~]# lsof -i :80    ------>h ...

  2. 数据库学习之"清理表内所有数据"

    今天在写定时任务的时候表内的数据都出现了问题,所以用了 1 truncate table 表名 来清空表内的数据

  3. 配置sublime text 3来编写Markdown

    如何使用sublime text 3编写Markdown  编写markdown的编辑器无论客户端还是在线的都有很多,这里将sublime text3作为markdown的编辑器,需要进行一些配置. ...

  4. expression:_CrtlsValidHeapPointer

    详见stackoverflow "_CrtIsValidHeapPointerUserData means, that you have a heap corruption, which i ...

  5. PHP截取字符串(指定开始和结束的字符串)

  6. 《深入理解ES6》笔记——扩展对象的功能性(4)

    变量功能被加强了.函数功能被加强了,那么作为JavaScript中最普遍的对象,不加强对得起观众吗? 对象类别 在ES6中,对象分为下面几种叫法.(不需要知道概念) 1.普通对象 2.特异对象 3.标 ...

  7. enum in c++

    enum in c++ enum的实用的定义:给一个值指定一个名称.enums是一种给值命名的方式. 枚举值就是一个整数 用enum的目的:增加程序的可读性 enum的用法:enums [枚举的类名] ...

  8. 【UWP】实现一个波浪进度条

    好久没写 blog 了,一个是忙,另外一个是觉得没啥好写.废话不多说,直接上效果图: 可能看到这波浪线你觉得会很难,但看完这篇 blog 后应该你也会像我一样恍然大悟.图上的图形,我们可以考虑是由 3 ...

  9. redis笔记补充

    redis补充 这篇文章是redis入门笔记的补充. 1.info命令 用来显示服务的信息. info命令可以跟下面的选项: server: 关于 Redis 服务器的一些信息 clients: 客户 ...

  10. paramterType和resultType的区别

    resultType是sql语句查询结果集的封装类型,也就是说把sql查询的结果封装在bean里返回回去,是存数据用的. paramType是从传过来的Bean中取数据放进例如insert语句的val ...