web-dev-qa-db-fra.com

Comment persister svelte store

Existe-t-il une option directe pour conserver les données du magasin svelte de sorte que même lorsque la page est actualisée, les données seront disponibles.

Je n'utilise pas de stockage local car je veux que les valeurs soient réactives.

sveltesvelte-store
10
Anil Sivadas

Vous voudrez peut-être également vérifier celui-ci https://github.com/andsala/svelte-persistent-store

De plus, si vous utilisez un sapeur et que vous ne voulez pas que quelque chose s'exécute sur le serveur, vous pouvez utiliser le hook onMount

onMount(() => {
  console.log('I only run in the browser');
});
1
Dmitry Boychev

https://higsch.me/2019/06/22/2019-06-21-svelte-local-storage/ par Matthias Stahl suggère:

// store.js
import { writable } from 'svelte/store';

export const count = writable(0);

// App.svelte
import { count } from 'store.js';

Afin de rendre le magasin persistant, il suffit d'inclure la fonction useLocalStorage à l'objet store.

// store.js
import { writable } from 'svelte/store';

const createWritableStore = (key, startValue) => {
  const { subscribe, set } = writable(startValue);

  return {
    subscribe,
    set,
    useLocalStorage: () => {
      const json = localStorage.getItem(key);
      if (json) {
        set(JSON.parse(json));
      }

      subscribe(current => {
        localStorage.setItem(key, JSON.stringify(current));
      });
    }
  };
}

export const count = createWritableStore('count', 0);

// App.svelte
import { count } from 'store.js';

count.useLocalStorage();

Ensuite, dans votre App.svelte appelez simplement la fonction useLocalStorage pour activer l'état persistant.

0
mic