是否可以从外部 js 文件访问 Svelte 商店?
Posted
技术标签:
【中文标题】是否可以从外部 js 文件访问 Svelte 商店?【英文标题】:Is it possible to access Svelte store from external js files? 【发布时间】:2020-03-26 07:51:13 【问题描述】:我想知道我是否能够从一个普通的 .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);
【问题讨论】:
【参考方案1】:是的,绝对的。
一方面,store API 非常简单,没有什么可以阻止您自己订阅 store 以了解其价值:
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);
【讨论】:
哦,非常感谢! subscribe 方法对我来说效率更高:) get() 方法触发了我的大脑并解决了我的问题。谢谢!【参考方案2】:除了rixo的回答,更好的实现add
的方法是使用商店的update
方法:
import counter from "./stores";
export function add()
counter.update(n => n + 1);
您还可以创建一个实现该逻辑的custom store。
【讨论】:
【参考方案3】:这不完全是您要求的(导入),但此方法具有相同的目的: 您将商店作为参数传递,因此无需在 .js 中导入您的商店
import get from 'svelte/store'
export function add(yourStore)
let _yourStore = get(yourStore)
yourStore.set(_yourStore + 1)
然后您只需将您的商店导入您的 Svelte 组件。 它允许不关心 .js 中的商店导入,而只关心您的组件。
【讨论】:
【参考方案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);
)
)
【讨论】:
以上是关于是否可以从外部 js 文件访问 Svelte 商店?的主要内容,如果未能解决你的问题,请参考以下文章