是否可以从外部 js 文件访问 Svelte 商店?

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

我想知道我是否能够从普通 .js 文件访问我的 Svelte 存储值。

我正在尝试编写返回基于存储值的动态值的函数,以将它们导入任何组件。 但是在普通的 .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);
}

是的,绝对。

一方面,商店 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);

除了rixo的回答,实现add的更好方法是使用商店的update方法:

import { counter } from "./stores";

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

您还可以创建一个 custom store 来实现该逻辑。

这与您要求的(导入)不完全相同,但此方法的用途相同: 您将商店作为参数传递,因此无需在 .js 中导入您的商店

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

然后你只需要在你的 Svelte 组件中导入你的商店。
它允许不关心您的 .js 中的商店导入,而只关心您的组件。

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