Questions tagged [svelte-store]

In the Svelte component framework, a store is where you can keep a part of your application state accessible to multiple places of your component hierarchy, or even to code outside your components. Your Svelte components can react to changes in your stores just as if they were local variables. Stores are covered in greater detail in the tutorial (6 parts; click Next for each part).

Svelte provides implementations of writable, readable, & derived stores for you, but you can also implement your own stores that follow the store contract. Svelte Society maintains a listing of packages that add further capabilities to stores.

Use this tag for questions about creating and using Svelte stores, and accessing them in your Svelte components.

225 questions
63
votes
13 answers

How to persist svelte store

Is there any direct option to persist svelte store data so that even when the page is refreshed, data will be available. I am not using local storage since I want the values to be reactive.
Anil Sivadas
  • 1,658
  • 3
  • 16
  • 26
45
votes
4 answers

Is it possible to access Svelte store from external js files?

I am wondering if i would be able to access my Svelte store values from a plain .js file. I am trying to write functions returning a dynamic value based on a store value, to import them in any component. But in a plain .js file I can't just access…
Joseph Allain
  • 640
  • 1
  • 5
  • 10
23
votes
2 answers

How to use Svelte store with tree-like nested object?

The Svelte official tutorial employs such complex object in its document for let root = [ { type: 'folder', name: 'Important work stuff', files: [ { type: 'file', name: 'quarterly-results.xlsx'…
hgl
  • 2,034
  • 4
  • 21
  • 30
22
votes
1 answer

What is the difference between set() and update() method in Svelte Store?

I'm new to Svelte Store. Here in svelte tutorial, they used update() method in and components to update value. But in , they used set() method to reset value. What exactly is the difference between update()…
Abir Sheikh
  • 463
  • 4
  • 9
13
votes
2 answers

Understanding Context in Svelte (convert from React Context)

I have a react app that uses ContextAPI to manage authentication and I am trying to implement a similar thing in Svelte. In Authenticate.js I have this: import React, { useContext, useState, useEffect } from "react" import { auth } from…
Kay
  • 2,057
  • 3
  • 20
  • 29
13
votes
1 answer

How to get store value from another store?

How to get store value from another store? https://svelte.dev/repl/0ab80c2fb8e045958d844bd4b11c04a9?version=3.22.1 In the example I include a variable inputVal in stores.js file and changing in set: (val) => {inputVal=val; set( val );}, and use in…
lukaszpolowczyk
  • 605
  • 1
  • 7
  • 27
11
votes
1 answer

Typing svelte $store variable

I wanted to know if it is possible de type the dollar sign value of a custom svelte store ? From this example : app.svelte

The count is {$count}

Tryall
  • 640
  • 12
  • 22
11
votes
4 answers

How to trigger a function when there is a value change in subscribed store in Svelte?

One of my components is subscribed to a variable in a store. Whenever there is a change in that store var, I want to trigger a function. stores.js import { writable } from "svelte/store"; export const comparedProducts =…
rohanharikr
  • 1,201
  • 1
  • 13
  • 28
8
votes
1 answer

What is the correct way for updating a Svelte writable array store?

What is the correct way (or differences if both are correct) for updating a $orderItems = writable([]) Svelte writable array store? We'll assume result is a new item I want to push at the end of $orderItems. orderItems.update(items => ([...items,…
nimser
  • 620
  • 2
  • 9
  • 22
8
votes
1 answer

Make AJAX Request from Store

I have 3 questions regarding Svelte Stores: How do I make ajax request inside a store? I've tried using the following: REPL Demo //store.js import { writable } from 'svelte/store'; let data = []; const apiURL =…
Miro
  • 8,402
  • 3
  • 34
  • 72
8
votes
4 answers

Making class instance reactive in Svelte using stores

I am learning Svelte by creating simple app. The logic is written using classes. The idea is, that all the data needed comes from class instance properties. Instances should not be instantiated more than once. I am using stores to provide components…
Eric Rovell
  • 393
  • 1
  • 6
  • 15
8
votes
1 answer

Testing svelte components with svelte/store

When testing svelte components, using jest & @testing-library/svelte, the state is shared between tests, is there away to tear down after each test so i have more isolated unit tests. store/theme import { writable } from "svelte/store"; export…
8
votes
1 answer

How to bind a svelte component's state to the query string in Sapper

My sapper app revolves around a table component. This table component has state (offset, limit, sort, filters, etc) that I would like to represent in the query string of the URL. The table works fine currently by directly updating its state:
Philip C
  • 133
  • 1
  • 9
7
votes
1 answer

How to use SSR with Stores on SvelteKit

I am new to sveltekit and svelte in general, and I am trying to load data from an API to the stores, here is how I am doing it export const load = async ({ fetch }) => { const data = get(dataStore); if (browser && data) { …
Marik Ishtar
  • 2,899
  • 1
  • 13
  • 27
6
votes
1 answer

Svelte Stores & Jest

I'm looking for an way to mock/stub stores that are used in Svelte components, specifically with the auto-subscribe syntax (ie $myStore or $myStore.property). I've tried a couple of different mocks, mostly along the lines of the…
Ben Shurts
  • 61
  • 4
1
2 3
14 15