Можно ли получить доступ к магазину Svelte из внешних js файлов?

Question

Мне интересно, смогу ли я получить доступ к своим значениям хранилища Svelte из простого файла.js.

Я пытаюсь написать функции, возвращающие динамическое значение на основе значения хранилища, чтобы импортировать их в любой компонент. Но в простом файле.js я не могу просто получить доступ к значению хранилища с помощью знака $..

Краткий пример базовой функции, которая использует сохраненное значение и может использоваться в нескольких компонентах:

//in .svelte

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

РЕДАКТИРОВАТЬ: немного перефразировать

РЕДАКТИРОВАТЬ: нашел решение, но я действительно не знаю, действительно ли оно оптимизировано..

//in .js file

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

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

Answer 1

В дополнение к ответу rixo лучший способ реализовать add использовать магазин update метод:

import { counter } from "./stores";

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

Вы также можете создать собственный магазин, в котором реализована эта логика.

Answer 2

Да, конечно.

Во-первых, API магазина очень прост и ничто не мешает вам самостоятельно подписаться на магазин, чтобы узнать значение:

import myStore from './stores'

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

И, если вы просто хотите узнать текущее значение, у Svelte есть помощник для этого, get функция:

import { get } from 'svelte/store';

import myStore from './stores'

const value = get(myStore);

Answer 3

Это не совсем то, что вы просили (импорт), но этот метод служит той же цели: вы передаете свой магазин в качестве аргумента, поэтому нет необходимости импортировать в.js ваш магазин

import {get} from 'svelte/store'
export function add(yourStore) {
   let _yourStore = get(yourStore)
   yourStore.set(_yourStore + 1)
}

Затем вам просто нужно импортировать свой магазин в компонент Svelte.
Это позволяет не заботиться об импорте хранилища в вашем.js, а только в вашем компоненте.

Answer 4

Многие примеры магазинов Svelte не используют объекты, так что вот как у меня это работает. Это использует асинхронную выборку для обновления локали пользователя до0. Представить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});
                })
            })
}