Svelte setContext and getContext

上下文 API 为组件提供了一种机制，可以在不传递数据和函数作为 props 或分派大量事件的情况下相互“交谈”。这是一项高级功能，但很有用。

以使用 Mapbox GL 地图的示例应用程序为例。我们想使用 <MapMarker> 组件显示标记，但我们不想传递对底层 Mapbox 实例的引用作为每个组件的 prop。

上下文 API 有两部分 — ​setContext​ 和 ​getContext​。如果组件调用 ​setContext(key, context)​，则任何子组件都可以使用 ​const context = getContext(key)​ 检索上下文。

让我们先设置上下文。在 ​Map.svelte​ 中，从 ​svelte​ 导入 ​setContext​，从 ​mapbox.js​ 导入 ​key​ 并调用 ​setContext​：

import { onMount, setContext } from 'svelte';
import { mapbox, key } from './mapbox.js';

setContext(key, {
	getMap: () => map
});

上下文对象可以是您喜欢的任何内容。与生命周期函数一样，​setContext​ 和 ​getContext​ 必须在组件初始化期间调用；由于 ​map​ 在组件挂载之前不会创建，因此我们的 context 对象包含一个 ​getMap​ 函数而不是 ​map​ 本身。

在等式的另一边，在 ​MapMarker.svelte​ 中，我们现在可以获得对 Mapbox 实例的引用：

import { getContext } from 'svelte';
import { mapbox, key } from './mapbox.js';

const { getMap } = getContext(key);
const map = getMap();

标记现在可以将自己添加到地图中。

更完善的 ​<MapMarker>​ 版本也可以处理移除和属性更改，但我们在这里只演示上下文。

Context keys

在 ​mapbox.js​ 中你会看到这一行：

const key = {};

我们可以使用任何东西作为键——例如我们可以做 ​setContext('mapbox', ...)​ 。使用字符串的缺点是不同的组件库可能会意外地使用同一个字符串；使用对象字面量意味着键在任何情况下都保证不会发生冲突（因为一个对象只对自身具有引用相等性，即 ​{} !== {}​ 而​“x”===“x”​），即使你有跨多个组件层运行的多个不同上下文。

Contexts vs. stores

Contexts 和 stores 看起来很相似。它们的不同之处在于，stores 可用于应用程序的任何部分，而 context 仅可用于组件及其后代。如果你想使用一个组件的多个实例，而一个组件的状态不会干扰其他组件的状态，这会很有帮助。

事实上，您可以将两者结合使用。由于 context 不是反应性的，因此随时间变化的值应该表示为存储：

const { these, are, stores } = getContext(...);

示例代码

• App.svelte

<script>
	import Map from './Map.svelte';
	import MapMarker from './MapMarker.svelte';
</script>

<Map lat={35} lon={-84} zoom={3.5}>
	<MapMarker lat={37.8225} lon={-122.0024} label="Svelte Body Shaping"/>
	<MapMarker lat={33.8981} lon={-118.4169} label="Svelte Barbershop & Essentials"/>
	<MapMarker lat={29.7230} lon={-95.4189} label="Svelte Waxing Studio"/>
	<MapMarker lat={28.3378} lon={-81.3966} label="Svelte 30 Nutritional Consultants"/>
	<MapMarker lat={40.6483} lon={-74.0237} label="Svelte Brands LLC"/>
	<MapMarker lat={40.6986} lon={-74.4100} label="Svelte Medical Systems"/>
</Map>

• Map.svelte

<script>
	import { onMount, setContext } from 'svelte';
	import { mapbox, key } from './mapbox.js';

	setContext(key, {
		getMap: () => map
	});

	export let lat;
	export let lon;
	export let zoom;

	let container;
	let map;

	onMount(() => {
		const link = document.createElement('link');
		link.rel = 'stylesheet';
		link.href = 'https://unpkg.com/mapbox-gl/dist/mapbox-gl.css';

		link.onload = () => {
			map = new mapbox.Map({
				container,
				style: 'mapbox://styles/mapbox/streets-v9',
				center: [lon, lat],
				zoom
			});
		};

		document.head.appendChild(link);

		return () => {
			map.remove();
			link.parentNode.removeChild(link);
		};
	});
</script>

<style>
	div {
		width: 100%;
		height: 100%;
	}
</style>

<div bind:this={container}>
	{#if map}
		<slot></slot>
	{/if}
</div>

• MapMarker.svelte

<script>
	import { getContext } from 'svelte';
	import { mapbox, key } from './mapbox.js';

	const { getMap } = getContext(key);
	const map = getMap();

	export let lat;
	export let lon;
	export let label;

	const popup = new mapbox.Popup({ offset: 25 })
		.setText(label);

	const marker = new mapbox.Marker()
		.setLngLat([lon, lat])
		.setPopup(popup)
		.addTo(map);
</script>

• mapbox.js

import mapbox from 'mapbox-gl';

// https://docs.mapbox.com/help/glossary/access-token/
mapbox.accessToken = MAPBOX_ACCESS_TOKEN;

const key = {};

export { mapbox, key };