Svelte组件中定义的store无法导入到store.js文件的问题求助

嘿，我来帮你理清楚这个问题～你遇到的问题其实是Svelte组件和普通JS模块的工作方式差异导致的，咱们一步步拆解：

为什么你的方法行不通？ #

1. 组件的export不是模块导出：Svelte组件里的export let data或者export const allMags，本质是组件的props定义或者组件内部的变量，并不是普通JS模块的导出项。当你从.svelte文件导入时，这些内容不会被当作模块导出暴露出来，所以会报错“没有导出名为allMags”。
2. $语法只能在Svelte组件里用：$allMags是Svelte提供的编译时语法糖，专门用来在组件内部订阅store的值。普通的JS文件（比如你的store.js）不会被Svelte编译器处理，所以直接写$allMags会被当作普通变量，自然会报“未定义”的错误。

正确的解决办法 #

核心思路是：把store的定义移到独立的JS/TS模块中，让组件和store.js都能共享这个模块，而不是把store放在组件里。

步骤1：创建独立的store模块

比如新建src/stores/magazineStores.js文件，把store的逻辑放在这里：

import { writable, derived } from 'svelte/store';

// 先定义一个可写的store用来接收组件传入的data
export const magsSource = writable([]);

// 如果需要基于它创建衍生store，直接在这里定义
export const allMags = derived(magsSource, ($mags) => $mags);

步骤2：在组件里更新这个store

回到myComponent.svelte，导入刚才的store，然后在data变化时更新它：

<script>
import { magsSource } from '../stores/magazineStores.js';
export let data;

// 当data props变化时，自动更新store的值
$: $magsSource = data.magazines;
</script>

步骤3：在store.js里导入使用

现在你就可以在src/store.js里正常导入并创建衍生store了：

import { derived } from 'svelte/store';
import { allMags } from './stores/magazineStores.js';

// 示例：创建一个只包含名称的衍生store
export const magNames = derived(allMags, ($allMags) => {
  return $allMags.map(mag => mag.name);
});

补充说明 #

如果你的data.magazines是静态数据（不会变化），那可以更简单：直接在独立store模块里初始化readable store，不需要用writable。但如果是动态从父组件传入的props，上面的方法更合适，因为它能响应data的变化。

备注：内容来源于stack exchange，提问作者gurt