代码之家 › 专栏 › 技术社区 › gurt

svelte:从组件导入存储?

svelte-store svelte-component sveltekit svelte

gurt · 技术社区 · 3 年前

我在一个svelte组件中创建了一个可读存储( src/components/myComponent.svelte )像这样

import { readable } from "svelte/store";

export let data;

const mags = data.magazines;
export const allMags = readable(mags);

console.log($allMags) // correct output

我想将此商店导入我的 src/store.js 文件,以便我可以使用它来创建派生存储。我尝试了以下操作:

import { writable, readable, derived } from "svelte/store";
import { allMags } from "../src/components/myComponent.svelte";
// console.log($allMags)

我遇到了以下错误:

client.ts:112语法错误:请求的模块'/src/components/myComponent.svelte?t=1696086887675'不提供名为“allMags”的导出(在stores.js?t=169608687675:2:10)

显然,记录$allMags不起作用,我收到了这个错误:

|- ReferenceError: $allMags is not defined  
   at eval (src/stores.js:8:13)  
   at async instantiateModule (/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:54405:9)

Internal server error: $allMags is not defined

我认为(我是个苗条的傻瓜)这个问题源于 allMags 在 store.js 文件这是不允许的吗?如果允许,我如何修复导入语句?

1 回复 | 直到 3 年前

brunnerh 3 年前

除非从 context="module" script 。任何其他导出都是 组件实例 。
即使你这样做,你也不能使用 $store syntax Svelte文件之外。要获取存储值一次,请使用 get utility function 。要连续接收商店更改通知,请使用 subscribe 功能。