所以在过去的一周里，我一直在尝试一些 Svelte。我想要一些简单的组件，假设一个将由商店管理的计数器（与 API 文档中显示的方式相同）。我还将有一个组件用于带有他自己的商店的待办事项列表和另一个将在他自己的商店中再次抛出随机事实的组件。
现在我想要一个大的主要对象，例如：
const bigObject = {
counter,
todos,
randomFact
}
我能够从我的组件中获取具有初始值的对象，但我无法使其具有响应性，这意味着如果我更新计数器值或请求另一个随机事实，我希望 bigObject 使用这些新闻值进行更新。 ..
你们如何处理这种情况？
谢谢，
是否有任何直接选项可以保留临时存储数据，以便即使刷新页面也可以使用数据。
我不使用本地存储，因为我希望这些值是反应性的。
我正在制作一个模态，其属性存储在商店中。而不是像这样打开它，从一个元素：on:click={() => $modal.isOpen = true}
我想这样打开它：
on:click={() => $modal.toggle()}从一个元素。
这是我的代码：
export const modal = writable({
isOpen: false,
title: 'Title',
content: 'Content',
toggle: () => {
console.log(modal)
modal.set({ ...modal, isOpen: true });
}
});
当我登录时modal，它只记录set, subscribe, update方法。然后当我再次单击时，这些方法消失了：它正确地覆盖了它们，似乎我永远无法获得模态的初始化状态。我尝试使用this或参数 ( (a, b) =>)访问当前对象，但都没有返回任何内容。
你好:)
I'm trying to register an user and after success, setContext to newly registered user and then navigate to home. Server properly responds and registers user, but when setContext is called i get the following error: "index.mjs:552 Uncaught (in promise) Error: Function called outside component initialization"
<script>
import { setContext } from 'svelte'
async function handleRegistration(e) {
let user = {
firstname: e.target.firstname.value,
lastname: e.target.lastname.value,
}
fetch('http://localhost:3001/api/auth/register', {
method: 'POST',
headers: {'Content-Type':'application/json'},
body: JSON.stringify(user)
})
.then(res => res.json())
.then(res => …我有一个工作派生商店，名为selectedDocument in svelte。当我尝试向其中添加正确的类型时，出现以下 TS linting 错误。（并且智能感知不起作用）
Expected 2 type arguments, but got 1.ts(2558)
Type '{ view_id: never; user_id: never; doc_id: never; user_name: never; user_avatar: never; cardMap: never; cards: never; }' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)
商店可以工作，类型可以与其他类似数据一起工作
export interface MainView {
view_id: string;
user_id: string;
doc_id: string;
user_name: string;
user_avatar: string;
cardMap: CardMap;
cards: {
[key: string]: Card;
};
}
export interface Document {
doc_id: string; …我创建了一个包含表单的视图，该表单的控件绑定到模型对象上的属性，该对象也由其他视图共享）。我想弄清楚是否真的需要或推荐使用 Store 范式。
例如，模型看起来有点像：
model = {
foo: undefined,
bar: undefined,
baz: undefined
}
... UI 将通过以下方式将各种输入绑定到模型：
//example.svelte
<script>
import { exampleModel } from "./models.js";
</script>
<h2>Has foo?</h2>
<label for="input_foo_t">yes</label>
<input id="input_foo_t" type="radio" bind:group={exampleModel.foo} value={true}/>
<label for="input_foo_f">no</label>
<input id="input_foo_f" type="radio" bind:group={exampleModel.foo} value={false}/>
<h2>Has bar?</h2>
<label for="input_bar_t">yes</label>
<input id="input_bar_t" type="radio" bind:group={exampleModel.bar} value={true}/>
<label for="input_bar_f">no</label>
<input id="input_bar_f" type="radio" bind:group={exampleModel.bar} value={false}/>
理想情况下，我希望将论文作为一个整体保留。从我看到的所有例子中，那里没有这样的东西。Svelte 商店的意图是提供超细粒度的、可共享的数据，以便我们基本上“存储”单个值吗？或者是否有示例显示在商店范式中使用的模型对象之类的东西？我是否缺少一些需要通过使用 Svelte Store（类似于 Angular 的摘要）来利用的生命周期过程？
如何将 Svelte 存储与树状嵌套对象一起使用？从这个答案：
注意：绑定仅在相同变量时才有效。也就是说，您不能将绑定变量放入中间变量中，并让 Svelte 继续跟踪此绑定。
这以及我自己的测试似乎意味着无法从 Svelte 组件外部的脚本反应性地更新嵌套存储（更新存储并更新状态）。据我所知，唯一的方法是在store.update()对商店进行更改后手动调用脚本。它是否正确？
我正在考虑重构我的代码：我的主要组件的代码变得太笨拙，我想引入更多组件，并且可能将.js文件中的状态更新函数保留在组件之外，以实现可重用性。
关于性能的一些问题：
这里是 REPL：https://svelte.dev/repl/56770fec88af4b76bdc8ea962178854e ?version=3.42.1
这里是代码：
应用程序.svelte：
<script>
import {editableStore} from "./store";
let name = "John"
$: player = editableStore(name);
</script>
<h1>Hello {$player.name}!</h1>
<button on:click={() => name = (name === "Bob" ? "Jerry" : "Bob")}>
Change name
</button>
<h2>Log:</h2>
{#each $player.log as log}
<li>{log}</li>
{/each}
商店.js：
import {writable} from "svelte/store";
const defaultStore = {
name: "Bob",
age: 18,
log: []
};
export const editableStore = (name) => {
console.log("Recreated with name:", name);
const {subscribe, update} = writable({...defaultStore}, () => () => …我在一个简洁的组件（）中创建了一个可读的存储，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 SyntaxError: 请求的模块 '/src/components/myComponent.svelte?t=1696086887675' 未提供名为 'allMags' 的导出（位于stores.js?t=1696086887675: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。这是不允许的吗？如果允许，我该如何修复导入语句？