svelte 组件的输出

Question

When i add svelte component on page, i create the new exemplar of class.

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


<ComponentA/>

And every time component destroying and created again.
But I need to save the state of the component.
(example: the display of blocks, position of blocks, text, and much more)
When I create new exemplar, I can put it in global variable. Can I output it from global? Is that real?

Answer 1

First of all, learn about stores .

Example

for example, to save the scrolling position in your App.svelte component (and not lose them if you change the component or ...):

export a variable in your stores.js

  export const AppY = writable(0);

then bind your Y position (of your App.svelte component with svelte:scrollY) to a variable.
in your App.svelte :

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

Now you have the scrollY position in your writable store. to save this position for long time, you can use localStorage .