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

Question

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

提前致谢。

Answer 1

你的问题有两点：

1. 如果您从 js 文件导出变量，无论您如何定义它（const 或 let），它都将是只读的
2. 如果你想让一个变量在 svelte 中具有反应性，则必须在 .svelte 文件中定义该变量，然后将观察到对其的赋值（即 var = “value”）

您可以通过在 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>

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

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

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

https://svelte.dev/repl/dd241487e2424d5b9d93fb9fbdd23b6c?version=3.24.1

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模块是static，一个是singleton，会跑一次。 当脚本将被其他组件使用时，num 是共享的，不会再次初始化。 如果您需要共享 num 没关系。 您还可以使用闭包或 class 来创建实例（实例变量）。

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