无法使用 svelte 获取上下文答案

【问题标题】：cannot getcontext with svelte无法使用 svelte 获取上下文
【发布时间】：2020-09-04 10:59:12
【问题描述】：

我想让我的数据在全球范围内可访问。据我了解，我可以使用 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 文件未在任何地方导入。

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

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

【问题讨论】：

我的理解是上下文是与所有子组件进行通信。对于应用程序中的全局数据，您应该使用商店：svelte.dev/tutorial/readable-stores
感谢@JeffProd。那么 App.svelte 中的上下文呢？商店现在对我来说感觉很复杂，只是因为一些常量。但也许这是唯一的方法......
@16ar 为什么不只使用一个 js 模块？只需简单地导入它并完成。无需为了一些常量而与商店混为一谈。
嗨@Fygo，我最终设法使用了一家商店，但这似乎是我需要的更好主意！我只是从未使用过它们，所以我不知道这是可能的......也许你可以在答案中举一些例子？

标签： svelte sapper

【解决方案1】：

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

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

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;

然后在你的苗条组件中：

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

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

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

【讨论】：