Svelte 最新中文文档教程（16）—— Context（上下文）

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。
目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。
我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上前端大佬成长之路。
Context（上下文）

大多数状态是组件级别的状态，其生命周期与组件相同。然而，也存在应用程序范围或页面范围的状态,这也需要进行相应的处理。
处理这种情况最简单的方法是创建全局状态并直接导入它。

1. /// file: state.svelte.js
2. export const myGlobalState = $state({
3.         user: {
4.                 /* ... */
5.         }
6.         /* ... */
7. });

复制代码

1. [/code]这样做有几个缺点：
2. [list]
3. [*]只有当您的全局状态仅在客户端使用时,它才能安全地工作 - 例如，当您正在构建一个不在服务端渲染任何组件的单页应用时。如果您的状态最终在服务端被管理和更新，它可能会在 sessions 和（或）用户之间共享，从而导致 bug
4. [*]这可能给人一种误导性的印象,即某个状态是全局的,而实际上它只应该在你的应用程序的某个特定部分使用
5. [/list]为了解决这些缺点，Svelte 提供了一些 context 原语来缓解这些问题。
6. [size=5]设置和获取上下文[/size]
8. 要将任意对象与当前组件关联，请使用 setContext。
9. [code]

复制代码

然后，组件的子级（包括插槽内容）可以使用 getContext 访问上下文。

1. [/code]setContext 和 getContext 解决了上述问题：
2. [list]
3. [*]状态不是全局的，而是限定在组件范围内。这样就可以安全地在服务端渲染组件而不会泄露状态
4. [*]很明显，状态不是全局的，而是限定在特定的组件树中，因此不能在应用的其他部分使用
5. [/list][indent][!NOTE] setContext/getContext 必须在组件初始化期间调用。
6. [/indent]上下文本身不是响应式的。如果你需要上下文中的响应式值，你可以传递一个 $state 对象到上下文中，其属性 [i]将会[/i] 是响应式的。
7. [code]<button onclick={() => value.count++}>增加</button>

复制代码

1. <p>计数为 {value.count}</p>

复制代码

要检查给定的 key 是否已在父组件的上下文中设置，可以使用 hasContext。

1. [/code]您还可以使用 getAllContexts 获取属于最近父组件的整个上下文映射。这在你以编程方式创建组件并想要将现有上下文传递给它时很有用。
2. [code]

复制代码

封装上下文交互

上述方法对如何使用它们并没有太多限制。当你的应用规模增长时，将设置和获取上下文封装到函数中并正确地为其添加类型是值得的。

1. // @errors: 2304
2. import { getContext, setContext } from 'svelte';
4. let userKey = Symbol('user');
6. export function setUserContext(user: User) {
7.         setContext(userKey, user);
8. }
10. export function getUserContext(): User {
11.         return getContext(userKey) as User;
12. }

复制代码

Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上前端大佬成长之路。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！