在svelte开发中，初学者常遇到的一个误区是将svelte组件文件（`.svelte`）误用于导出纯数据，导致意外地导入了组件实例而非数据本身。本文将详细解析这一问题，阐明svelte组件与普通javascript模块的导入机制差异，并提供正确导入数据的最佳实践，确保开发者能够高效、清晰地管理项目中的数据和组件。

Svelte中组件与数据导入的机制差异

Svelte的核心理念是构建可复用的UI组件。当您创建一个.svelte文件时，Svelte编译器会将其视为一个组件定义。这意味着该文件中的export语句，如export let feedback = [...]，并不会像在普通JavaScript模块中那样直接导出变量。相反，它定义了该Svelte组件的“props”（属性），即外部可以向该组件传递的数据。

因此，当您尝试从一个.svelte文件导入内容时，您实际上导入的是该组件的构造函数或其定义，而不是文件中声明的任何变量的直接值。这就是为什么在示例中，尝试导入feedback变量却得到了一个class Feedbacks extends SvelteComponentDev这样的组件实例。

问题描述与错误分析

考虑以下Svelte应用结构：

App.svelte (错误示例)

  
{feedback}

feedbacks.svelte (错误示例)

在这种设置下，App.svelte尝试从feedbacks.svelte导入一个名为feedback的变量。然而，由于feedbacks.svelte是一个Svelte组件文件，其export let feedback实际上是声明了一个名为feedback的组件属性。当App.svelte执行import feedback from "./components/feedbacks.svelte";时，它导入的是Feedbacks组件的默认导出（即组件的构造函数或其定义），而不是我们期望的数组数据。

因此，当在

{feedback}

class Feedbacks extends SvelteComponentDev { constructor(options) { super(options); init(this, options, instance$1, create_fragment$1, safe_not_equal, { feedback: 0 }); dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "Feedbacks", options, id: create_fragment$1.name }); } get feedback() { throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''"); } set feedback(value) { throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''"); } }

这个错误信息明确指出：“Props cannot be read directly from the component instance”。这进一步印证了feedback现在是一个组件实例，而不是一个可以直接访问其内部数据的普通JavaScript对象。

解决方案：使用纯JavaScript模块导出数据

解决这个问题的关键在于，将纯粹的数据存储和导出任务交给普通的JavaScript文件（.js或.ts），而不是Svelte组件文件。Svelte组件文件应专注于定义UI结构和行为。

Moshi Chat

法国AI实验室Kyutai推出的端到端实时多模态AI语音模型，具备听、说、看的能力，不仅可以实时收听，还能进行自然对话。

下载

1. 创建一个纯JavaScript文件来存储数据

将数据数组移动到一个名为data.js（或feedbacks.js等）的普通JavaScript文件中。在这个文件中，使用标准的JavaScript export语法来导出您的数据。

data.js (正确示例)

export const feedbackData = [
  { text: 'Its good', rate: 7 },
  { text: 'alright', rate: 6 },
  { text: 'terrible', rate: 2 }
];

// 如果需要，也可以导出其他数据或函数
export const appName = "Feedback App";

请注意，这里我们使用了export const而不是export let，因为数据通常是常量，不需要在外部被重新赋值。同时，为了避免命名冲突，将变量名从feedback更改为feedbackData，以清晰表明其内容。

2. 在App.svelte中导入并使用数据

现在，App.svelte可以像导入任何其他JavaScript模块一样，从data.js中导入feedbackData。

App.svelte (正确示例)

  
反馈列表
  {#each feedbackData as item}
    
{item.text} - 评分: {item.rate}
  {/each}

通过这种方式，feedbackData现在是一个普通的JavaScript数组，可以被App.svelte直接访问和使用，例如通过#each块进行迭代渲染。

最佳实践与总结

• 区分职责：
  • .svelte文件用于定义Svelte组件，它们负责UI的渲染和交互逻辑。从.svelte文件导出的内容通常是组件的属性（props）或组件本身。
  • .js或.ts文件用于存储纯数据、工具函数、常量、Svelte Store等非UI逻辑。从这些文件导出的内容是标准的JavaScript模块导出。
• 明确导入方式：
  • 当导入一个Svelte组件时，通常使用默认导入（import ComponentName from './ComponentName.svelte'），然后在模板中使用标签。
  • 当导入纯数据或函数时，使用具名导入（import { dataVariable } from './data.js'）或默认导入（import defaultExport from './module.js'），这取决于.js文件如何导出。
• 避免混淆： 始终牢记Svelte组件文件和普通JavaScript模块在导入导出机制上的根本区别，这将帮助您避免许多常见的初学者错误。

遵循这些原则，您将能够更清晰、更有效地组织Svelte项目中的代码，确保数据和组件各司其职，从而提高应用的可维护性和可扩展性。