当前位置：首页 > news >正文

Vue3 + TypeScript中provide和inject的用法示例

news 来源：原创 2025/8/15 12:01:03

基础写法（类型安全）

typescript

// parent.component.vue
import { provide, ref } from 'vue'
import type { InjectionKey } from 'vue'// 1. 定义类型化的 InjectionKey
const COUNTER_KEY = Symbol() as InjectionKey<number>
const USER_KEY = Symbol() as InjectionKey<{ name: string }>// 在 setup 中使用
setup() {const counter = ref(0)provide(COUNTER_KEY, counter) // 提供响应式数据const user = { name: 'John' }provide(USER_KEY, user) // 提供静态对象return { counter }
}

typescript

// child.component.vue
import { inject } from 'vue'
import type { InjectionKey } from 'vue'// 复用相同的 key
const COUNTER_KEY = Symbol() as InjectionKey<number>
const USER_KEY = Symbol() as InjectionKey<{ name: string }>setup() {// 2. 安全注入（带默认值）const counter = inject(COUNTER_KEY, ref(0)) // 响应式数据const user = inject(USER_KEY, { name: 'Guest' }) // 静态数据// 3. 强制注入（当确定父级已提供时）const forcedCounter = inject(COUNTER_KEY)!return { counter, user }
}

`<script setup>` 语法糖写法

vue

<!-- Parent.vue -->
<script setup lang="ts">
import { provide, ref } from 'vue'// 定义 key
const messageKey = Symbol() as InjectionKey<string>const message = ref('Hello from parent')
provide(messageKey, message)
</script>

vue

<!-- Child.vue -->
<script setup lang="ts">
import { inject } from 'vue'const messageKey = Symbol() as InjectionKey<string>// 注入 + 类型声明
const message = inject(messageKey, 'default message')// 处理可能 undefined 的情况
const safeMessage = inject(messageKey) ?? 'fallback value'
</script>

响应式对象注入

typescript

// types.ts
export interface User {id: numbername: string
}export const UserKey = Symbol() as InjectionKey<User>

vue

<!-- Parent.vue -->
<script setup lang="ts">
import { provide, reactive } from 'vue'
import { UserKey } from './types'const user = reactive({id: 1,name: 'Alice'
})provide(UserKey, user)
</script>

vue

<!-- Child.vue -->
<script setup lang="ts">
import { inject } from 'vue'
import { UserKey } from './types'const user = inject(UserKey)// 使用时需要处理可能 undefined 的情况
if (user) {console.log(user.name) // 类型安全
}
</script>

最佳实践提醒：

使用 InjectionKey：确保类型安全
默认值处理：inject(key, defaultValue)
响应式数据：建议使用 ref/reactive 保持响应性
代码组织：推荐将 keys 集中管理在单独文件中
安全判断：当不确定是否已提供时，使用可选链操作符 ?.

typescript

// 推荐的文件结构
// src/provides/keys.ts
import type { InjectionKey } from 'vue'export const API_KEY = Symbol() as InjectionKey<AxiosInstance>
export const THEME_KEY = Symbol() as InjectionKey<'light' | 'dark'>

Vue3 + TypeScript中provide和inject的用法示例

基础写法（类型安全） typescript // parent.component.vue import { provide, ref } from vue import type { InjectionKey } from vue// 1. 定义类型化的 InjectionKey const COUNTER_KEY Symbol() as InjectionKey<number> const USER_KEY Sy…...

编程日记 2025/8/15 12:01:03

【国家能源集团生态协作平台-注册/登录安全分析报告】

前言由于网站注册入口容易被黑客攻击，存在如下安全问题： 暴力破解密码，造成用户信息泄露短信盗刷的安全问题，影响业务及导致用户投诉带来经济损失，尤其是后付费客户，风险巨大，造成亏损无底洞…...

编程日记 2025/8/15 13:37:03

不确定与非单调推理的基本概念

前文我们讨论了建立在经典逻辑基础上的确定性推理，这是一种运用确定性知识进行的精确推理。同时，它又是一种单调性推理，即随着新知识的加人，推出的结论或证明了的命题将单调地增加。但是，人们通常是在信息不完善、不精确的情况下运用不确定性知识进行思维、求解问题的，推…...

编程日记 2025/8/15 23:56:41

系统架构设计师：计算机组成与体系结构（如CPU、存储系统、I/O系统）高效记忆要点、知识体系、考点详解、、练习题并提供答案与解析

计算机组成与体系结构高效记忆要点从CPU、存储系统、I/O系统三大模块展开，结合高频考点与记忆技巧，有助于系统化掌握核心知识点。一、CPU结构与工作原理 1. CPU的组成核心组件： 运算器（ALU） ：负责算术…...

编程日记 2025/8/15 23:54:22

FreeSWITCH中SIP网关（Gateway）操作

freeswitch是一款简单好用的VOIP开源软交换平台。以下是一篇关于FreeSWITCH中SIP网关（Gateway）操作的技术指南，基于提供的官方文档内容整理： 一、网关生命周期管理 1. 创建新SIP Profile并启动 FreeSWITCH支持多SIP Profile&…...

编程日记 2025/8/12 17:15:46

构建自动翻译工作流：技术与实践

一、引言制药行业客户迫切需要一种翻译解决方案，以解决公司内部多样化的翻译难题。他们需要的不仅是提升翻译效率和准确性的工具，更希望能够保持文档的原始格式。我们观察到客户的需求广泛，包括多语言办公文件、研究文档和药品报批文件等&a…...

编程日记 2025/8/15 23:59:33

在pycharm中搭建yolo11分类检测系统--PyQt5学习（二）

第二部分测试本地pycharm通过程序连接远程服务器autodl 模型的推理需要借助远程服务器autodl，但是界面的运行是在pycharm中，我的设想是按钮调用一个py文件就好了。 1. 本地运行PyQt5界面。 2. 当需要载入权重时，通过SSH连接到AutodL服务…...

编程日记 2025/8/15 23:56:12

汽车行驶工况特征参数：从“速度曲线”到“驾驶DNA”的硬核解码

作为新能源汽车行业的从业者，你是否曾困惑于这些问题： 为什么同一款电动车，不同用户的实际续航差异高达30%？如何精准量化驾驶行为对电池寿命的影响？车企标定的“NEDC续航”与真实路况差距的根源是什么？ 这…...

编程日记 2025/8/12 14:28:57

dify本地部署，docker-plugin_daemon-1启动不了,一直报错

解决办法，修改这两个配置，然后重启进入源代码目录，docker文件夹下 docker compose down docker compose up -d https://github.com/langgenius/dify/issues/17677...

编程日记 2025/8/10 6:41:07

2025 年第十五届 MathorCup 数学应用挑战赛 A 题：汽车风阻预测

A 题：汽车风阻预测在空气动力学领域，空气阻力对汽车以及航空航天工业中载具的性能和效率有着至关重要的影响。以往的研究表明，预测这种阻力需要借助先进的工业仿真软件进行大规模流体力学模拟仿真，而该模拟过程不仅算法复杂…...

编程日记 2025/8/15 23:58:03

AI Agents系列之AI代理架构体系

1. 引言智能体架构是定义智能体组件如何组织和交互的蓝图，使智能体能够感知其环境、推理并采取行动。本质上，它就像是智能体的数字大脑——集成了“眼睛”（传感器）、“大脑”（决策逻辑）和“手”（执行器），用于处理信息并采取行动。选择正确的架构对于构建有效的智能…...

编程日记 2025/8/15 1:10:27

使用Java动态数据生成PDF报告：简化您的报告导出流程

在当今的数据驱动世界中，能够快速且有效地将数据转化为可视化的报告是一项宝贵的技能。无论是商业分析、项目管理还是学术研究，PDF报告都是分享和存档信息的理想格式。在这篇博客中，我们将探讨如何使用Java编程语言结合iText库来动态生成包含…...

编程日记 2025/8/14 22:32:10

Sqlite3交叉编译全过程

Sqlite3交叉编译全过程一、概述二、下载三、解压四、配置五、编译六、安装七、验证文件类型八、移植8.1、头文件sqlite3.h8.2、动态链接库移植8.3、静态态链接库移植九、验证使用9.1. 关键函数说明十、触发器使用十一、sqlite表清空且恢复id值十二、全文总结一、概述 SQLi…...

编程日记 2025/8/13 14:08:20

Qt QThread 两种线程管理方法

在 Qt 中，QThread 有两种常见的用法，分别对应不同的线程管理模型。这两种方法各有优缺点，适用于不同的场景： 1. 子类化 QThread（继承 QThread，重写 run() 方法）这是传统的线程用法，类似于 Java 或 C++ 标准库中的线程模型。通过继承 QThread 并重写 run() 方法，将需…...

编程日记 2025/8/15 23:56:12

React 中如何获取 DOM：用 useRef 操作非受控组件

📌 场景说明在写 React 的时候，通常我们是通过“受控组件”来管理表单元素，比如用 useState 控制 <input> 的值。但有些时候，控制的需求只是临时性的，或者完全不需要重新渲染组件，这时候直接访问…...

编程日记 2025/8/13 11:23:59

GoogleCodeUtil.java

Google动态验证码实现 GoogleCodeUtil.java package zwf;import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import java.nio.charset.StandardCharsets; import java.security.SecureRandom;/** https://mvnrepository.com/artifact/commons-codec/…...

编程日记 2025/8/11 22:47:00

Hutool之DateUtil：让Java日期处理变得更加简单

前言在Java开发中，日期和时间的处理是一个常见问题。为了简化这个过程，许多开发者会使用第三方工具包，如Hutool。Hutool是一个Java工具包，提供了许多实用的功能，其中之一就是日期处理。日期时间工具类是Hutool的核心包…...

编程日记 2025/8/13 7:49:37

解锁古籍中的气候密码，探索GPT/BERT在历史灾害研究中的前沿应用；气候史文本挖掘防灾减灾；台风案例、干旱案例、暴雨案例

历史灾害文献分析方法论的研究，是连接过去与未来的关键桥梁。通过对古籍、方志、档案等非结构化文本的系统性挖掘与量化分析，不仅能够重建千年尺度的灾害事件序列（如台风、洪旱等），弥补仪器观测数据的时空局限性&#…...

编程日记 2025/8/13 19:30:00

DeepSeek-R3、GPT-4o 与 Claude-3.5-Sonnet 全面对比：性能、应用场景与技术解析

随着大模型技术的迅猛发展，国产模型正逐渐崭露头角，尤其是DeepSeek-R3的发布，更是在AI技术社区中引起广泛关注。而与此同时，国际领先的GPT-4o和Claude-3.5-Sonnet也在不断迭代升级，持续刷新业界对AI能力的认知。下文将…...

编程日记 2025/8/15 8:25:42

智能翻译播放器，让无字幕视频不再难懂

打工人们你们好！这里是摸鱼特供版~ 今天给大家带来一款超牛的黑科技——Splayer，完全免费的智能翻译播放器，让你轻松看懂无字幕视频！ 推荐指数：★★★★★ 软件简介 Splayer 是一款完全免费的智能翻译播放器&#…...

编程日记 2025/8/15 8:29:47

快手本地生活2024年GMV同增200%，“新线城市+AI”将成增长引擎

4月17日，“新线大市场，AI新机遇”快手本地生活2025聚力大会在沈阳召开。会上，快手高级副总裁、本地生活事业部负责人笑古在聚力大会上表示，“新线城市AI”将成为快手本地生活的增长引擎。据「TMT星球」了解，2024年…...

编程日记 2025/8/13 18:02:10

第七篇：系统分析师第三遍——1、2章

目录一、目标二、计划三、完成情况四、意外之喜(最少2点)1.计划内的明确认知和思想的提升标志2.计划外的具体事情提升内容和标志五、总结一、目标通过参加考试，训练学习能力，而非单纯以拿证为目的。 1.在复习过程中，训练快速阅读能力、掌…...

编程日记 2025/8/15 10:34:20

2025妈妈杯数学建模D题完整分析论文（共42页）（含模型建立、代码）

2025 年第十五届 MathorCup 数学建模D题完整分析论文目录摘要一、问题分析二、问题重述三、模型假设四、模型建立与求解 4.1问题1 4.1.1问题1思路分析 4.1.2问题1模型建立 4.1.3问题1样例代码（MATLAB和Python） 4.1.4问题1结果…...

编程日记 2025/8/15 9:35:10

软考高级-系统架构设计师论文范文参考（一）

文章目录论SOA技术的应用论SOA在企业信息化中的应用论UP（统一过程方法）的应用论分布式数据库的设计与实现论改进Web服务器性能的有关技术论基于UML的需求分析论基于构件的软件开发论基于构件的软件开发(二) 论SOA技术的应用摘要： 本人于…...

编程日记 2025/8/13 1:34:29

江湖路远，唯PUT可稳：Express 路由更新招式全解

前言江湖传闻，后端开发如同修炼绝世武功：有人精通 POST 掌，横扫千军；有人修习 GET 指法，探查万象。而真正踏入高阶境界的高手，常常默默修炼一门冷门却威力极强的秘技，PUT 神功。今日时机正好，你我相逢于码海江湖，不如来一场技术切磋，也许能悟出更新之道，功力再上…...

编程日记 2025/8/10 17:21:57

【k8s系列1】一主两从结构的环境准备

环境准备虚拟机软件准备及安装，这里就不详细展开了，可以看文章:【一、虚拟机vmware安装】 linux环境准备及下载，下载镜像centOS7.9，以前也有写过这个步骤的文章，可以看：【二、安装centOS】开始进入正题…...

编程日记 2025/8/11 8:33:57

通过特定协议拉起 electron 应用

在 Android 通过 sheme 协议可以拉起其他应用。 electron 应用也可以通过类似特定协议被拉起。在同时有 web、客户端的应用里，可以通过这种方式在 web 拉起客户端。支持拉起客户端 const PROTOCOL xxxif (process.defaultApp) {// 这里是开发环境，有…...

编程日记 2025/8/13 23:38:48

IDEA MyBatisCodeHelper Pro插件高版本解密

声明，该方法仅仅作为个人研究学习使用，请勿传播版本说明系统：macOS（Windows同理）IDE：IntelliJ IDEA 2024.4MyBatisCodeHelper Pro 3.4 环境准备从插件市场下载MyBatisCodeHelper Pro 找到MyBatisCo…...

编程日记 2025/8/12 20:57:51

网站制作公司哪家好？如何选择靠谱的网站设计公司

在当今数字化时代，企业想要在互联网上立足，一个专业、美观且功能强大的网站是必不可少的。然而，面对众多的网站建设公司，如何选择一家真正适合自己需求的合作伙伴，成为了许多企业主和创业者面临的难题。毕竟&#xff0…...

编程日记 2025/8/15 0:45:19

Linux之基础命令

Linux作为开源操作系统的代表，以其高效、灵活和强大的命令行工具闻名。无论是系统管理、开发调试还是日常使用，掌握基础命令都是与Linux系统交互的必备技能。本文整理了20个最常用的Linux基础命令，帮助新手快速入门。目录目录与文件导航文…...

编程日记 2025/8/6 20:02:49

使用手机归属地查询API，使效率事半功倍

手机归属地查询API通过查询手机号码的归属地信息，为企业提供了一个高效、便捷的解决方案，帮助企业在竞争激烈的市场中脱颖而出。代码示例请求参数说明: 名称必填类型说明key是string个人中心查看phone是int手机号返回参数说明: 名称类型说明phon…...

编程日记 2025/8/11 13:35:54

基于FPGA的AES加解密系统verilog实现,包含testbench和开发板硬件测试

目录 1.课题概述 2.系统测试效果 3.核心程序与模型 4.系统原理简介 4.1 字节替换（SubBytes） 4.2 行移位（ShiftRows） 4.3 列混合（MixColumns） 4.4 轮密钥加（AddRoundKey） 4.…...

编程日记 2025/8/11 2:43:59

【AI部署】腾讯云GPU -—SadTalker的AI数字人访问web服务—未来之窗超算中心

访问部署在Cloud Studio上的web服务当你把该项目部署在本地时，访问该服务的请求地址为http://localhost:8080/hello；当你把该项目部署在Cloud Studio工作台启动时，要想访问到该服务，需要先在工作台右侧打开访问链接面板&#xff…...

编程日记 2025/8/15 9:29:35

Linux：命令行参数、环境变量

命令行参数执行程序时，可以从命令行传值给 C 程序。这些值被称为命令行参数，它们对程序很重要，特别是当我们想从外部控制程序，而不是在代码内对这些值进行硬编码时，就显得尤为重要了。在 C 语言中，命令…...

编程日记 2025/8/12 23:03:24

Linux CentOS 更改MySQL数据库目录位置

在 CentOS 系统上更改 MySQL（或 MariaDB）数据库目录位置（datadir）需要谨慎操作，以避免数据丢失或服务启动失败。以下是详细步骤： 1. 停止 MySQL/MariaDB 服务 bash 复制 sudo systemctl stop mysqld …...

编程日记 2025/8/13 22:21:14

Unity-微信截图功能简单复刻-03绘制空心矩形

思路-绘制空心矩形拓展UGUI的Graphic类,实现拖拽接口。开始拖拽时记录鼠标位置， 使用拖拽中的鼠标位置和记录的位置，计算矩形顶点，绘制矩形。两个三角形合并为一个矩形，作为空心矩形的一条边，四个边合并为空心矩形…...

编程日记 2025/8/7 20:01:25

Flutter与FastAPI的OSS系统实现

作者：孙嘉成目录一、对象存储二、FastAPI与对象存储 2.1 缤纷云S4服务API对接与鉴权实现 2.2 RESTful接口设计与异步路由优化三、Flutter界面与数据交互开发 3.1 应用的创建 3.2页面的搭建 3.3 文件的上传关键词：对象存储、FastAPI、Flutte…...

编程日记 2025/8/14 22:52:06

环境搭建与入门：Flutter SDK安装与配置

环境搭建与入门：Flutter SDK安装与配置一、Flutter开发环境概述 1.1 Flutter开发环境组成 Flutter开发环境主要包含以下几个关键组件： Flutter SDK：Flutter的核心开发工具包Dart SDK：Flutter使用的编程语言环境IDE/编辑器&am…...

编程日记 2025/8/14 7:23:56

MATLAB 控制系统设计与仿真 - 35

MATLAB鲁棒控制器分析所谓鲁棒性是指控制系统在一定(结构，大小)的参数扰动下，维持某些性能的特征。根据对性能的不同定义，可分为稳定鲁棒性(Robust stability)和性能鲁棒性(Robust performance)。以闭环系统的鲁棒性作为目标设计得到的…...

编程日记 2025/8/15 13:30:55

多模态记忆融合：基于LSTM的连续场景生成——突破AI视频生成长度限制

一、技术背景与核心挑战 2025年视频生成领域面临的关键难题是长时程连贯性——传统方法在生成超过5分钟视频时会出现场景跳变、物理规则不一致等问题。本研究提出时空记忆融合架构（ST-MFA），通过LSTM记忆门控与多模态对齐技术，在R…...

编程日记 2025/8/15 4:29:36

架构师面试（三十二）：注册中心数据结构

问题提到【注册中心】，我们对它的基本功能，肯定可以顺手拈来，比如：【服务注册】【服务发现】【健康检查】【变更通知】等。透过这些基本功能，一个普适的注册中心的数据结构应该如何设计呢？ 可以结合着…...

编程日记 2025/8/13 20:17:01

Oracle 19c新特性：OCP认证考试与职业跃迁的关键？

在数字化转型的浪潮中，Oracle 19c作为数据库领域的旗舰版本，不仅承载着技术革新的使命，更成为IT从业者职业进阶的“黄金跳板”。无论是企业级应用的高可用性需求，还是云原生架构的快速迭代，Oracle 19c的智能化与多模型…...

编程日记 2025/8/12 1:31:45

360蜘蛛IP完整版，360搜索引擎蜘蛛IP列表.pdf

360搜索的蜘蛛在访问网站时，都会带上带有360spider签名信息的UA，其形态为： Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36; 360Spider 为满足站长朋友们的需求&a…...

编程日记 2025/8/12 4:38:39

C++_设计模式\_观察者模式（Observer Pattern）

👋 Hi, I’m liubo👀 I’m interested in harmony🌱 I’m currently learning harmony💞️ I’m looking to collaborate on …📫 How to reach me …📇 sssssdsdsdsdsdsdasd🎃 dsdsdsdsdsddfsg…...

编程日记 2025/8/15 12:27:42

23种设计模式全面解析

设计模式是解决软件设计中常见问题的经典方案。根据《设计模式：可复用面向对象软件的基础》（GoF），23种设计模式分为以下三类： 一、创建型模式（5种） 目标：解耦对象的创建过程&#x…...

编程日记 2025/8/10 5:11:20

学术AI工具推荐

一、基础信息对比维度知网研学AI（研学智得AI）秘塔AIWOS AI开发公司同方知网（CNKI）上海秘塔网络科技Clarivate Analytics是否接入DeepSeek✅ 深度集成（全功能接入DeepSeek-R1推理服务）✅ 通过API接入DeepS…...

编程日记 2025/8/12 1:36:38

Agent的九种设计模式介绍

Agent的九种设计模式介绍一、ReAct模式原理：将推理（Reasoning）和行动（Acting）相结合，使Agent能够在推理的指导下采取行动，并根据行动的结果进一步推理，形成一个循环。Agent通过生成一系列的思维链（Thought Chains）来明确推理步骤，并根据推理结果执行相应的动作，…...

编程日记 2025/8/15 21:31:21