41

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);
}

4 Answers 4

70

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);
0
16

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.

2

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.

0

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});
                })
            })
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.