Vue3 与依赖注入
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 与依赖注入的更多相关文章
- 【17MKH】我在框架中对.Net依赖注入的扩展
说明 依赖注入(DI)是控制反转(IoC)的一种技术实现,它应该算是.Net中最核心,也是最基本的一个功能.但是官方只是实现了基本的功能和扩展方法,而我呢,在自己的框架 https://github. ...
- webapi - 使用依赖注入
本篇将要和大家分享的是webapi中如何使用依赖注入,依赖注入这个东西在接口中常用,实际工作中也用的比较频繁,因此这里分享两种在api中依赖注入的方式Ninject和Unity:由于快过年这段时间打算 ...
- ASP.NET Core 中文文档 第四章 MVC(3.8)视图中的依赖注入
原文:Dependency injection into views 作者:Steve Smith 翻译:姚阿勇(Dr.Yao) 校对:孟帅洋(书缘) ASP.NET Core 支持在视图中使用 依赖 ...
- 在WPF中使用依赖注入的方式创建视图
在WPF中使用依赖注入的方式创建视图 0x00 问题的产生 互联网时代桌面开发真是越来越少了,很多应用都转到了浏览器端和移动智能终端,相应的软件开发上的新技术应用到桌面开发的文章也很少.我之前主要做W ...
- MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息
MVVM模式解析和在WPF中的实现(六) 用依赖注入的方式配置ViewModel并注册消息 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二 ...
- .Net Core MVC 网站开发(Ninesky) 2.3、项目架构调整-控制反转和依赖注入的使用
再次调整项目架构是因为和群友dezhou的一次聊天,我原来的想法是项目尽量做简单点别搞太复杂了,仅使用了DbContext的注入,其他的也没有写接口耦合度很高.和dezhou聊过之后我仔细考虑了一下, ...
- ASP.NET Core中如影随形的”依赖注入”[下]: 历数依赖注入的N种玩法
在对ASP.NET Core管道中关于依赖注入的两个核心对象(ServiceCollection和ServiceProvider)有了足够的认识之后,我们将关注的目光转移到编程层面.在ASP.NET ...
- ASP.NET Core中如影随形的”依赖注入”[上]: 从两个不同的ServiceProvider说起
我们一致在说 ASP.NET Core广泛地使用到了依赖注入,通过前面两个系列的介绍,相信读者朋友已经体会到了这一点.由于前面两章已经涵盖了依赖注入在管道构建过程中以及管道在处理请求过程的应用,但是内 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
随机推荐
- 在 Spring AOP 中,关注点和横切关注的区别是什么?
关注点是应用中一个模块的行为,一个关注点可能会被定义成一个我们想实现的 一个功能. 横切关注点是一个关注点,此关注点是整个应用都会使用的功能,并影响整个应 用,比如日志,安全和数据传输,几乎应用的每个 ...
- 客户端注册 Watcher 实现?
1.调用 getData()/getChildren()/exist()三个 API,传入 Watcher 对象 2.标记请求 request,封装 Watcher 到 WatchRegistrati ...
- Leetcode刷题之链表中箭头转移和内容转移
链表中箭头转移和内容转移 链表中特别注意xxx.next=xxx 和xxx=xxx的区别 xxx.next=xxx表示将指针(箭头)转移 xxx=xxx表示将内容转移 Leetcode206翻转链表 ...
- React-简单通用的抛物线动画
一个简单通用的 React 抛物线动画demo Usage import { parabola } from "./parabola" ... onAnimate = () =&g ...
- C2678 二进制“<”: 没有找到接受“const ***”类型的左操作数的运算符解决办法
正确代码如下:#include<iostream> #include<string> #include<map> using namespace std; /*仿函 ...
- vue中事件冒泡规则和事件捕获规则
<div id="app"> <div @click="handleClickOne"> <p @click="hand ...
- (ICONIP2021)On the Unreasonable Effectiveness of Centroids in Image
目录 摘要 1.引言 2.提出的方法 2.1 CentroidTripletloss 2.2 聚合表示 3.实验 3.1 数据集 3.2 应用细节 3.3 Fashion检索结果 3.4 行人再识别结 ...
- 我们可以定向调度某个pod在某个node上进行创建
集群环境:1.k8s用的是二进制方式安装 2.操作系统是linux (centos)3.操作系统版本为 7.2/7.4/7.94.k8s的应用管理.node管理.pod管理等用rancher.k8s令 ...
- Java 使用-安装
Java 使用-安装 官方网站 JDK 下载地址 JDK 历史版本 参考资料 CentOS7系统卸载自带的OpenJDK并安装SUNJDK CentOS7卸载 OpenJDK 安装Sun的JDK8 安 ...
- QT类使用记录
QT类使用记录 1.QSharedMemory 提供了对一段共享内存的访问.既提供了被多进程和多线程共享的一段内存的访问.也为单线程或单进程锁定内存以实现互斥访问提供了方法. QSharedMemor ...