苗条组件的输出答案

【问题标题】：Output of the svelte component苗条组件的输出
【发布时间】：2020-05-13 13:12:34
【问题描述】：

当我在页面上添加 svelte 组件时，我创建了新的类示例。

import ComponentA from "./Component.svelte";
let component = new ComponentA({...});


<ComponentA/>

每次组件销毁并再次创建。
但我需要保存组件的状态。
（例如：块的显示、块的位置、文本等等）
当我创建新的示例时，我可以将它放在全局变量中。我可以从全局输出吗？这是真的吗？

【问题讨论】：

你试过商店吗？ svelte.dev/tutorial/writable-stores
我可以将创建的示例放入商店，但我不知道该示例如何从商店的根组件中输出。或者，我需要显示所有组件并隐藏不必要的组件。我知道，我确实可以创建 div 容器，输出容器中的所有组件，并隐藏不必要的容器。但我认为那是错误的方式。

【解决方案1】：

首先，了解stores。

示例

例如，将滚动位置保存在 App.svelte 组件中（如果您更改组件或...不会丢失它们）：

在您的 stores.js 中导出一个变量

  export const AppY = writable(0);

然后将您的 Y 位置（使用 svelte:scrollY 的 App.svelte 组件）绑定到一个变量。
在您的 App.svelte 中：

  import { AppY } from "../stores.js";
  // some code
  let Y = ... // bind your svelte:scrollY  here
  $: $AppY = Y;

现在您的可写存储中有了 scrollY 位置。要长时间保存这个位置，可以使用localStorage。

【讨论】：