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

Question

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

提前致谢。

Answer 1

你的问题有两点：

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

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-file 中的变量，但要使其更改具有反应性，您必须使用本地 .svelte-variable.

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

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

Answer 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 是共享的，不会再次初始化。如果您需要共享 num 没关系。您还可以使用闭包或 class 来创建实例（实例变量）。

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

Exporting a variable from script.js to App.svelte