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

因此，我有一个名为

script.js

的javascript文件，它包含一个变量

number

。我还有一个苗条的应用程序，我正试图将

number

导出到该应用程序，以便它可以在

App.svelte

中使用（并且是被动的）。任何帮助都将不胜感激

---

提前谢谢。

您的问题有两件事：

如果您从js文件导出变量，那么无论您如何定义它（const或let），它都将是只读的

如果希望变量在svelte中是被动的，则必须在.svelte文件中定义该变量，然后将观察对该变量的赋值（即var=“value”）

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

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

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

第二个问题要求您在.svelte文件中定义一个变量，然后为其赋值。变量的变化是被动的：

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

设num=0
num=num+1}>单击以添加。注意：{num}

基本上，您可以更新其他.js文件中的变量，但要使其更改成为被动的，您必须使用local.svelte变量

此问题的最佳解决方案是使用苗条存储

以下是REPL，它显示了这些不同的情况：

---

你的问题中有两件事：

如果您从js文件导出变量，那么无论您如何定义它（const或let），它都将是只读的

如果希望变量在svelte中是被动的，则必须在.svelte文件中定义该变量，然后将观察对该变量的赋值（即var=“value”）

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

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

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

第二个问题要求您在.svelte文件中定义一个变量，然后为其赋值。变量的变化是被动的：

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

设num=0
num=num+1}>单击以添加。注意：{num}

基本上，您可以更新其他.js文件中的变量，但要使其更改成为被动的，您必须使用local.svelte变量

此问题的最佳解决方案是使用苗条存储

以下是REPL，它显示了这些不同的情况：

---

在模块script.js中：

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

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，那没关系。您还可以使用闭包或类来创建实例（实例变量）

---

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

在您的模块script.js中：

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

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，那没关系。您还可以使用闭包或类来创建实例（实例变量）

---

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

您可以在App.svelte中使用回调函数将script.js中的变量传递给App.svelte。并在App.svelte中使用赋值，使其在App.svelte中起反应作用。请记住，es模块中的变量将被共享并初始化一次。但是您可以在script.js模块中使用闭包来创建您自己的实例。@voscausa您是否可以用示例代码编写您的注释作为答案，以便读者更好地理解您的解决方案？您可以使用App.svelte中的回调将变量从script.js传递到App.svelte。并在App.svelte中使用赋值，使其在App.svelte中起反应作用。请记住，es模块中的变量将被共享并初始化一次。但是您可以在script.js模块中使用闭包来创建自己的实例。@voscausa您是否可以用示例代码将您的注释作为答案，以便读者更好地理解您的解决方案