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中似乎不起作用（我知道苗条中不一定支持ie11）。我正在尝试调试它，但是我不了解上下文是如何工作的。由于getStore函数找不到与密钥匹配的商店，因此它将创建一个新的不相关商店。可以用babel ES6-> ES5解决吗？我进行了包括babel在内的初步测试，但无济于事...谢谢！

Answer 1

上下文API使用Map对象，该对象在IE11中不存在。您需要携带一个polyfill。

Svelte 3 getContext：不会在IE11中存储

1 个答案: