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

Question

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 the store value with the $ sign..

Quick exemple of a basic function that uses a store value and could be used on multiple components:

//in .svelte

function add() {
    $counter = $counter + 1;
}

EDIT: rephrasing a bit

EDIT: Found a solution but i don't really know if it's really optimized..

//in .js file

import { get } from "svelte/store";
import { counter } from "./stores";

export function add() {
    var counterRef = get(counter);
    counter.set(counterRef + 1);
}

Chloramphenicol

Answer 1

In addition to rixo's answer, a better way to implement add is to use the store's update method:

import { counter } from "./stores";

export function add() {
    counter.update(n => n + 1);
}

You could also create a custom store that implemented that logic.

Impending

Answer 2

Yes, absolutely.

For one thing, the store API is very simple and nothing prevents you from subscribing to the store yourself to know the value:

import myStore from './stores'

myStore.subscribe(value => {
  // do something with the new value
  // you could store it for future reference...
})

And, if you just want to know the current value, Svelte has a helper for that, the get function:

import { get } from 'svelte/store';

import myStore from './stores'

const value = get(myStore);

Waxwing

Answer 3

It's not exactly what you asked for (import) but this method serves same purpose. You pass your store as argument, so no need to import in the .js your store:

import { get } from 'svelte/store'

export function add(yourStore) {
   let _yourStore = get(yourStore)
   yourStore.set(_yourStore + 1)
}

Then you just have to import your store in your Svelte component.
It allows not to care about store imports in your .js, but only on your component.

Arlinda

Answer 4

Many Svelte store examples don't use objects, so here's how I got it working. This uses an async fetch to update the user's locale to 0. Imagine pstats = {uid: 1, locale: 5}...

import { pstats} from './stores.js'

export async function leave_locale() {
   return fetch(`./builds/leave`, {method: 'get'})
          .then(res => res.json())
          .then(res => {
                pstats.update((theStore) => {
                    return Object.assign(theStore, {locale: 0});
                })
            })
}

Corydalis