SveltesetContextandgetContext

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. storesContexts 和 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.jsimport mapbox from 'mapbox-gl';

// https://docs.mapbox.com/help/glossary/access-token/

mapbox.accessToken = MAPBOX_ACCESS_TOKEN;

const key = {};

export { mapbox, key };