Output of the svelte component

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?

Have you tried with stores? svelte.dev/tutorial/writable-stores — ezakto
I can put created exemplar in a store, but i don't know how that exemplar output in a root component from store. Or, i need show all components and do unnesessary components hide. I know, i can does create div containers, output all components in a containers, and hide unnesessary containers. But i think thats wrong way. — BBCat

Bagher Abiat Bagher Abiat · Accepted Answer · 2020-04-19T13:55:17

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.

Output of the svelte component

1 Answers

Example