将变量从 script.js 导出到 App.svelte答案

【问题标题】：Exporting a variable from script.js to App.svelte将变量从 script.js 导出到 App.svelte
【发布时间】：2020-08-18 10:11:44
【问题描述】：

所以我有一个名为script.js 的javascript 文件，它包含一个变量number。我还有一个苗条的应用程序，我正在尝试将number 导出到，以便它可以在App.svelte 中使用（并且可以反应）。对此的任何帮助将不胜感激。

提前致谢。

【问题讨论】：

您可以在 App.svelte 中使用回调将变量从 script.js 传递到 App.svelte。并在您的 App.svelte 中使用分配使其在 App 中具有反应性。
请记住，es-module 中的变量将被共享并被初始化一次。但是你可以在 script.js 模块中使用闭包来创建你自己的实例。
@voscausa 您能否用示例代码编写您的 cmets 作为答案，以便读者更好地理解您的解决方案

【解决方案1】：

你的问题有两点：

您可以通过在 script.js 中定义一个 setter 函数来解决第一个问题：

let number = 0
export const setNb = (value) => {number = value}

第二个问题需要你在 .svelte-file 中定义一个变量，然后给它赋值。变量的变化是被动的：

<script>
let num = 0
</script>
<h1 on:click={()=>num=num+1}>click to add. Nb:{num}</h1>

基本上，您可以更新其他 .js 文件中的变量，但要使其更改具有响应性，您必须使用本地 .svelte-variable。

这个问题的最佳解决方案是使用 svelte store。

这里是显示这些不同情况的 REPL：

【讨论】：

【解决方案2】：

在你的模块 script.js 中：

export onNum(callback) {
  afterUpdate(() => {  // or another way to detect / signal a num change here
    callback(num); 
  });
};

在您的 App.svelte 中：

let num = 0;
onNum((n) => num = n);

注意：es6 模块是静态的，是一种单例。它会运行一次。当脚本将被其他组件使用时，num 是共享的，不会再次初始化。如果您需要共享号码，没关系。您还可以使用闭包或类来创建实例（实例变量）。

我已经使用上述方法来处理多个苗条操作的结果，例如字段验证和处理表搜索（和标记）结果。

【讨论】：