Svelte 3 getContext：不在 IE11 中获取存储

Question

在最近的浏览器（Chrome 78 / Safari 13 / Firefox 70）中，在上下文中设置的商店似乎可以按预期工作，如下所示：

// stores.js
import { writable } from 'svelte/store';
import { setContext, getContext } from 'svelte';

function createStore(key) {
  const store = writable();
  setContext(key, store);
  return store;
}

export function getStore(key) {
  const store = getContext(key);
  if (!store) {
    return createStore(key);
  }
  return store;
}

并在组件中使用：

// Form.svelte
import { getStore } from '../stores/stores.js';
import Header from './Header.svelte'
export let incomingPages;

const currentPage = getStore('currentPage')
const numberOfPages = getStore('numberOfPages')
$currentPage = 0
$numberOfPages = Object.keys(incomingPages).length

<div class="page-wrapper" >
  <Header />

  <div class="page">
    <svelte:component this={pages[$currentPage].page}
                      descriptiveCopy={pages[$currentPage].descriptiveCopy} 
                      question={pages[$currentPage].question} />
  </div>
</div>

然后将 header 组件作为表单的子组件...

// Header.svelte
import { getStore } from '../stores/stores.js'
const totalPages = getStore('numberOfPages')
const currentPage = getStore('currentPage')

<div class="u-progress">
  <span>{$currentPage + 1} of {$totalPages - 1}</span>
</div>

但似乎在 ie11 中不起作用（我知道在 svelte 中不一定支持 ie11）。 我正在尝试调试它，但我不明白上下文是如何工作的。由于 getStore 函数找不到与键匹配的存储，因此它创建了一个新的不相关存储。这可以用 babel ES6 -> ES5 解决吗？我做了一个包括 babel 在内的初步测试，但无济于事......谢谢！

Answer 1

上下文 API 使用了 IE11 中不存在的 Map 对象。您需要携带polyfill。