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

编程问答 2022-08-16

问题描述

因此，我有一个名为script.js的JavaScript文件，其中包含一个变量number。我还尝试将number导出到一个精巧的应用程序，以便可以在App.svelte中使用它（并进行反应）。任何帮助这样做的人将不胜感激。

谢谢。

解决方法

您的问题有两件事：

  1. 如果您从js文件中导出变量，则无论您如何定义它（const或let），它都是只读的
  2. 如果您希望变量在svelte中具有反应性，则必须在.svelte-file中定义该变量，然后将对其进行赋值（即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>

基本上，您可以在其他.js文件中更新变量，但是要使更改生效，必须使用本地.svelte-variable。

解决此问题的最佳方法是使用苗条的商店。

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

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

,

在您的模块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也可以。您还可以使用闭包或类来创建实例（实例变量）。

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

exportimportjavascriptsvelte