无法使用 svelte 获取上下文

Question

我想让我的数据可以在全球范围内访问。根据我的理解，我可以使用 Context API 或存储，因为我的数据是静态的，我认为使用 context API 更容易，但我无法让它工作。

这是我的数据组件：

//MyDATA.svelte
<script>
   import { setContext } from "svelte";
   setContext("folioData",42);
</script>

这是要检索数据的组件

//MyComponent.svelte    
<script>
  import { getContext } from "svelte";
  const folioData = getContext("folioData");
  console.log(folioData); //--------> undefined
</script>

我知道，这只是教程...这两个文件在同一个文件夹中。也许存在导入问题？ MyData 文件未导入任何地方。

我确定这是一个新手（我就是）问题，但我已经为此苦苦挣扎了几个小时。

欢迎任何提示。非常感谢！

Answer 1

对于一个简单的常量，我只使用 javascript 文件（或模块，我更喜欢那个）。

示例：创建一个文件，例如constants.js 在您的 src 文件夹（或您想要的任何子文件夹）中：

export default {
  CSS_BASE_PREFIX: 'abc',
  ANIMATION_DURATION: 300
}

...然后将其导入到您的组件中：

<script>
  import constants from './constants';

  const basePrefix = constants.CSS_BASE_PREFIX;
  console.log('Anim duration:', constants.ANIM_DURATION);
</script>

<div class="{basePrefix}-my-comp">...</div>

这取决于你，你想给它什么样的结构（导出默认，命名导出等）只是一个警告：因为导入的对象是一个'const'但它的属性不是，您实际上可以在上面的示例中覆盖它们（您为什么要这样做？）：constants.ANIMATION_DURATION = 600; // don't do this.

...或者您可以这样做 (constants.js):

export const CSS_BASE_PREFIX = 'abc';
export const ANIMATION_DURATION = 300;

然后在您的 svelte 组件中：

<script>
  import * as constants from './constants';

  const basePrefix = constants.CSS_BASE_PREFIX;
  console.log('Anim duration:', constants.ANIM_DURATION);
</script>

您将无法再重新分配它，它会在编译时失败。选择权在你。

无法使用 svelte 获取上下文

cannot getcontext with svelte

svelte

sapper