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.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 使用 Map 对象，这些对象在 IE11 中不存在。你需要带一个 polyfill.

Svelte 3 getContext：无法在 IE11 中存储

Svelte 3 getContext: Doesn't Get Store in IE11

javascript

internet-explorer-11

svelte