Skip to main content
Svelte运行时

上下文

Context 允许组件访问父组件拥有的值，而无需将它们作为 props 传递下去（可能通过多层中间组件，称为 ‘prop-drilling’）。父组件使用 setContext(key, value) 设置上下文……

¥Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermediate components, known as ‘prop-drilling’). The parent component sets context with setContext(key, value)...

Parent
<script>
	import { setContext } from 'svelte';

	setContext('my-context', 'hello from Parent.svelte');
</script>
<script lang="ts">
	import { setContext } from 'svelte';

	setContext('my-context', 'hello from Parent.svelte');
</script>

...并且子进程使用 getContext 检索它：

¥...and the child retrieves it with getContext:

Child
<script>
	import { getContext } from 'svelte';

	const message = getContext('my-context');
</script>

<h1>{message}, inside Child.svelte</h1>
<script lang="ts">
	import { getContext } from 'svelte';

	const message = getContext('my-context');
</script>

<h1>{message}, inside Child.svelte</h1>

当 Parent.svelte 不直接了解 Child.svelte，而是将其作为 children snippet（demo）的一部分呈现时，这特别有用：

¥This is particularly useful when Parent.svelte is not directly aware of Child.svelte, but instead renders it as part of a children snippet (demo):

<Parent>
	<Child />
</Parent>

键（上例中的 'my-context'）和上下文本身可以是任何 JavaScript 值。

¥The key ('my-context', in the example above) and the context itself can be any JavaScript value.

除了 setContext 和 getContext，Svelte 还公开了 hasContext 和 getAllContexts 函数。

¥In addition to setContext and getContext, Svelte exposes hasContext and getAllContexts functions.

使用带状态的上下文(Using context with state)

¥Using context with state

你可以将反应状态存储在上下文 (demo) 中...

¥You can store reactive state in context (demo)...

<script>
	import { setContext } from 'svelte';
	import Child from './Child.svelte';

	let counter = $state({
		count: 0
	});

	setContext('counter', counter);
</script>

<button onclick={() => counter.count += 1}>
	increment
</button>

<Child />
<Child />
<Child />

...但请注意，如果你重新分配 counter 而不是更新它，你将 ‘断开链接’ — 换句话说，而不是这样...

¥...though note that if you reassign counter instead of updating it, you will ‘break the link’ — in other words instead of this...

<button onclick={() => counter = { count: 0 }}>
	reset
</button>

...你必须这样做：

¥...you must do this:

<button onclick={() => counter.count = 0}>
	reset
</button>

如果你做错了，Svelte 会警告你。

¥Svelte will warn you if you get it wrong.

类型安全上下文(Type-safe context)

¥Type-safe context

一种有用的模式是将对 setContext 和 getContext 的调用封装在辅助函数中，以便你保留类型安全性：

¥A useful pattern is to wrap the calls to setContext and getContext inside helper functions that let you preserve type safety:

context
import { function getContext<T>(key: any): T
Retrieves the context that belongs to the closest parent component with the specified key.
Must be called during component initialisation.


getContext, function setContext<T>(key: any, context: T): T
Associates an arbitrary context object with the current component and the specified key
and returns that object. The context is then available to children of the component
(including slotted content) with getContext.


Like lifecycle functions, this must be called during component initialisation.


setContext } from 'svelte';

let let key: {}key = {};

/** @param {User} user */
export function function setUserContext(user: User): void
@paramuser 
setUserContext(user: User
@paramuser 
user) {
	setContext<User>(key: any, context: User): User
Associates an arbitrary context object with the current component and the specified key
and returns that object. The context is then available to children of the component
(including slotted content) with getContext.


Like lifecycle functions, this must be called during component initialisation.


setContext(let key: {}key, user: User
@paramuser 
user);
}

export function function getUserContext(): UsergetUserContext() {
	return /** @type {User} */ (getContext<User>(key: any): User
Retrieves the context that belongs to the closest parent component with the specified key.
Must be called during component initialisation.


getContext(let key: {}key));
}
import { function getContext<T>(key: any): T
Retrieves the context that belongs to the closest parent component with the specified key.
Must be called during component initialisation.


getContext, function setContext<T>(key: any, context: T): T
Associates an arbitrary context object with the current component and the specified key
and returns that object. The context is then available to children of the component
(including slotted content) with getContext.


Like lifecycle functions, this must be called during component initialisation.


setContext } from 'svelte';

let let key: {}key = {};
export function function setUserContext(user: User): voidsetUserContext(user: Useruser: User) {
	setContext<User>(key: any, context: User): User
Associates an arbitrary context object with the current component and the specified key
and returns that object. The context is then available to children of the component
(including slotted content) with getContext.


Like lifecycle functions, this must be called during component initialisation.


setContext(let key: {}key, user: Useruser);
}

export function function getUserContext(): UsergetUserContext() {
	return getContext<User>(key: any): User
Retrieves the context that belongs to the closest parent component with the specified key.
Must be called during component initialisation.


getContext(let key: {}key) as User;
}

替换全局状态(Replacing global state)

¥Replacing global state

当你拥有由许多不同组件共享的状态时，你可能会倾向于将其放在自己的模块中，并在需要的地方导入它：

¥When you have state shared by many different components, you might be tempted to put it in its own module and just import it wherever it’s needed:

state.svelte
export const 
const myGlobalState: {
    user: {};
}
myGlobalState = 
function $state<{
    user: {};
}>(initial: {
    user: {};
}): {
    user: {};
} (+1 overload)
namespace $state
Declares reactive state.


Example:


let count = $state(0);
https://svelte.dev/docs/svelte/$state


@paraminitial The initial value
$state({
	user: {}user: {
		// ...
	}
	// ...
});

在许多情况下，这完全没问题，但存在风险：如果你在服务器端渲染期间改变状态（不鼓励这样做，但完全可能！）...

¥In many cases this is perfectly fine, but there is a risk: if you mutate the state during server-side rendering (which is discouraged, but entirely possible!)...

App
<script>
	import { myGlobalState } from 'svelte';

	let { data } = $props();

	if (data.user) {
		myGlobalState.user = data.user;
	}
</script>
<script lang="ts">
	import { myGlobalState } from 'svelte';

	let { data } = $props();

	if (data.user) {
		myGlobalState.user = data.user;
	}
</script>

...然后下一个用户可以访问数据。Context 解决了这个问题，因为它不会在请求之间共享。

¥...then the data may be accessible by the next user. Context solves this problem because it is not shared between requests.

上一页 下一页
存储