Выход компонента svelte

Question

Когда я добавляю компонент svelte на страницу, я создаю новый образец класса.

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


<ComponentA/>

И каждый раз компонент уничтожается и создается заново.
Но мне нужно сохранить состояние компонента.
(пример: отображение блоков, положение блоков, текст и многое другое)
Когда я создаю новый образец, я могу поместить его в глобальную переменную. Могу ли я вывести его из глобального? Это реально?

Answer 1

Прежде всего, изучите магазины .

Пример

, например, чтобы сохранить позицию прокрутки в компоненте App.svelte (и не потерять их, если вы меняете компонент или ...):

экспортируете переменную в свои магазины. js

  export const AppY = writable(0);

, затем привязываете свою позицию Y (вашего компонента App.svelte с помощью svelte: scrollY) к переменной.
в вашем App.svelte:

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

Теперь у вас есть позиция scrollY в вашем доступном для записи магазине. чтобы сохранить эту позицию на долгое время, вы можете использовать localStorage .